第6代iPad移动端断点适配异常：指定媒体查询不生效原因咨询

核心问题：断点范围与iPad视口不匹配 #

第6代iPad竖屏状态下的视口宽度为768px，但你定义的「Tablet - Portrait」媒体查询起始断点是min-width: 769px，这直接导致iPad竖屏被归类到「Mobile - Portrait」（max-width:768px）的规则范围内，你写在Tablet区块的样式自然不会被触发。

其他可能的诱因 #

• 缺失viewport元标签：如果页面未添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器会默认使用桌面端虚拟视口（通常为980px），此时虽然可能触发Tablet规则，但页面会被强制缩放，显示效果完全不符合预期。
• 混淆物理分辨率与视口宽度：第6代iPad的物理分辨率是1536×2048，但它的设备像素比（DPR）为2，浏览器实际计算的视口宽度是物理分辨率除以DPR，即768×1024，不要把物理分辨率当作视口宽度来设置断点。

修复方案 #

1. 调整断点范围：修改媒体查询数值，让768px归入Tablet区间，同时避免区间重叠：

/* Mobile - Portrait */
@media screen and (min-width: 240px) and (max-width: 767px) {
    
}

/* Tablet - Portrait */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    
}

2. 补全viewport标签：在HTML的<head>区域添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是移动端适配的基础前提，缺少它会导致所有媒体查询的逻辑混乱。

内容的提问来源于stack exchange，提问作者Rhulani Mogotsi