特定iPad横屏模式CSS Media Queries匹配异常解决方法

匹配错误核心原因 #

• 未添加orientation: landscape条件限定仅匹配横屏模式，不同iPad的横竖屏宽度存在重叠：比如12.9英寸iPad竖屏CSS宽度为1024px，和9.7英寸iPad横屏宽度完全一致
• 初始版本中9.7英寸的规则仅写了max-width: 1024px，未限定宽度下限，会匹配所有宽度小于等于1024px的设备，覆盖范围完全失控
• 所有规则仅靠宽度判断，未匹配对应设备的高度值，无法唯一锁定特定机型，很容易出现串匹配

使用代码前请先确认HTML头部已添加标准viewport配置，否则CSS的宽高判断会出现偏差：

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

精准匹配代码 #

三款目标iPad横屏状态下的CSS像素宽高组合是完全唯一的，同时匹配「横屏方向+宽度+高度」三个条件即可实现无冲突的独立适配，代码如下：

/* iPad 9.7英寸 横屏 */
@media screen and (orientation: landscape) and (width: 1024px) and (height: 768px) {
  body {
    background-color: green;
  }
}

/* iPad Pro 10.5英寸 横屏 */
@media screen and (orientation: landscape) and (width: 1112px) and (height: 834px) {
  body {
    background-color: red;
  }
}

/* iPad Pro 12.9英寸 横屏 */
@media screen and (orientation: landscape) and (width: 1366px) and (height: 1024px) {
  body {
    background-color: orange;
  }
}

如果需要兼容iOS 10以下的旧版Safari，可以把代码里的width/height替换为device-width/device-height，匹配逻辑完全一致。

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