求助：iPad（第10代）竖屏CSS媒体查询失效，横屏正常

问题出在你媒体查询里的-webkit-min-device-pixel-ratio: 3这个条件上。

iPad第10代（10.2英寸）的设备像素比（DPR）是2，不是3。你的竖屏媒体查询要求设备像素比至少为3，直接把目标设备排除在外了，所以浏览器根本不会触发这套样式，自然在开发者工具里也看不到相关规则。而横屏版本的媒体查询如果没加这个错误的DPR条件，就能正常匹配生效。

解决办法 #

你可以选择以下两种修改方式：

• 修正DPR条件，匹配iPad第10代的实际参数：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) /* 改为对应设备的DPR值 */
  and (orientation: portrait) {
  /* 你的样式代码 */
}

• 如果不需要限制设备像素比，直接移除这个条件（更通用，能覆盖更多iPad型号）：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
  /* 你的样式代码 */
}

补充说明：如果要兼顾标准写法，也可以用min-resolution: 2dppx替代WebKit私有属性，不过目前Safari对-webkit-min-device-pixel-ratio的支持依然稳定。

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