iPad横屏模式CSS媒体查询失效，咨询适配调整方案

我之前也踩过类似的坑，你的meta标签设置其实是没问题的，但原来的媒体查询写法太局限，没法适配不同型号的iPad（尤其是Retina屏幕的设备）。下面给你拆解问题并给出可行的解决方案：

为什么原来的方案不生效？ #

• 方案1的问题：固定了device-width:1024px和device-height:768px，这只适配老款非Retina的iPad（比如iPad 2）。现在多数iPad是Retina屏幕，部分新iPad Pro的CSS像素尺寸已经更大（比如12.9寸机型竖屏CSS像素为1024x1366，横屏则是1366x1024），固定值会直接漏掉这些设备。
• 方案2的问题：min-device-width:768px和max-device-width:1024px的范围会把横屏宽度超过1024px的iPad Pro排除在外，而且only screen在部分浏览器解析时可能存在兼容性小问题。

正确的媒体查询写法 #

推荐使用更通用的写法，覆盖所有iPad横屏场景，同时兼容Retina屏幕：

/* 适配所有iPad横屏（包括不同尺寸和Retina屏幕） */
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .ipad-landscape {
    color: blue;
    /* 在这里添加你的横屏专属样式 */
  }
}

如果需要更精准地针对iPad设备，还可以结合苹果设备的特性前缀：

/* 仅针对iPad横屏（排除其他1024px+的横屏设备） */
@media screen and (min-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  .ipad-landscape {
    color: blue;
  }
}

另外，现代浏览器也支持用aspect-ratio来判断横屏，写法更简洁：

/* 宽高比大于1即横屏，同时最小宽度匹配iPad */
@media screen and (min-width: 1024px) and (aspect-ratio > 1/1) {
  .ipad-landscape {
    color: blue;
  }
}

额外注意事项 #

1. 检查样式优先级：确保你的.ipad-landscape选择器优先级足够高，不会被其他全局样式覆盖。如果有冲突，可以尝试提高优先级（比如加上父元素选择器，或者临时用!important测试）。
2. 确认meta标签：你当前的meta设置<meta name="viewport" content="width=device-width, initial-scale=1"/>是正确的响应式基础配置，不需要修改，只要确保没有其他viewport相关的meta标签干扰即可。

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