针对 iPad 的媒体查询

【问题标题】：Media query for targeting iPad针对 iPad 的媒体查询
【发布时间】：2020-06-12 10:18:23
【问题描述】：

我在为 iPad Pro 和 iPad 编写特定查询时遇到问题，这些查询出现在 Google Chrome 开发人员工具中... 我无法定位 iPad Pro，例如

“和（最小设备宽度：768px）和（最大设备宽度：1024px）”

但它也恰好适用于其他分辨率，例如

“和（最小设备宽度：1024px）和（最大设备宽度：1366px）“

有人回答我如何为不同的 iPad 尺寸编写不同的媒体查询规则吗？非常感谢:)

【问题讨论】：

您是否检查了媒体查询的顺序？

标签： javascript css ipad media-queries

【解决方案1】：

iPad 可以使用-webkit-min-device-pixel-ratio 查询来检查屏幕是否为视网膜。较旧的 iPad 的 -webkit-min-device-pixel-ratio 值为 1。 iPad 3 及更高版本的值为2，而两者的屏幕尺寸相同。

/* iPad 1, 2, Mini and Air */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 3, 4 and Pro 9.7" */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

CSSTricks 有a great post on this 可以识别各种设备。

【讨论】：