如何避免不同视口尺寸iPad的CSS媒体查询样式被覆盖

问题根源 #

你当前的媒体查询存在范围重叠，比如820px-1180px和834px-1194px的区间有交集，当设备尺寸落在重叠区域时，CSS会遵循“后定义的规则覆盖先定义的”原则，导致前面的样式被覆盖。另外，部分iPad的视口尺寸你没精确匹配，也会触发多个查询同时生效。

解决方案 #

1. 明确各iPad的精确视口参数

先理清目标设备的真实视口尺寸（不含系统缩放）：

• iPad Pro 12.9英寸（3-6代）：竖屏1024px × 1366px，横屏1366px × 1024px
• iPad Pro 11英寸（全系列）/iPad Air 5代：竖屏834px × 1194px，横屏1194px × 834px
• iPad Air 4代/iPad 10代：竖屏820px × 1180px，横屏1180px × 820px

2. 编写无重叠的媒体查询

用精确的device-width和device-height组合，确保每个查询只匹配对应设备，避免范围交叉：

/* 小屏设备（如手机） */
@media only screen and (max-width: 768px) {
  /* CSS */
}

/* iPad Pro 12.9寸 横屏 */
@media only screen and (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

/* iPad Pro 12.9寸 竖屏 */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

/* iPad Air 4/iPad 10代 横屏 */
@media only screen and (device-width: 1180px) and (device-height: 820px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

/* iPad Air 4/iPad 10代 竖屏 */
@media only screen and (device-width: 820px) and (device-height: 1180px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

/* iPad Pro 11寸/iPad Air 5代 横屏 */
@media only screen and (device-width: 1194px) and (device-height: 834px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

/* iPad Pro 11寸/iPad Air 5代 竖屏 */
@media only screen and (device-width: 834px) and (device-height: 1194px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* 专属样式 */
}

3. 提升样式特异性（可选）

如果仍有个别样式被覆盖，可给媒体查询内的选择器增加特异性，比如通过父级选择器提高权重：

@media /* 对应设备查询 */ {
  .page-wrapper .target-component {
    /* 样式 */
  }
}

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