Question

我在编写针对Google Chrome开发者工具上显示的iPad Pro和iPad的特定查询时遇到问题... 我无法定位iPad Pro，例如

”和（最小设备宽度：768像素）和（max-device-width：1024px）“

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

”和（最小设备宽度：1024像素）和（最大设备宽度：1366px）”

有人针对我如何针对不同的iPad尺寸编写不同的媒体查询规则回答吗？非常感谢：）

Answer 1

iPad可以使用-webkit-min-device-pixel-ratio查询来检查屏幕是否为视网膜。较旧的iPad的-webkit-min-device-pixel-ratio值为1。 iPad 3及更高版本的iPad的值为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来识别各种设备。

针对iPad的媒体查询

1 个答案: