iPad 与 iPad Air 的媒体查询

Posted 2023-03-06

【中文标题】iPad 与 iPad Air 的媒体查询

【英文标题】：Media queries for iPad vs iPad Air

【发布时间】：2015-01-12 02:04:27

【问题描述】：

*** 上已经有 2 个关于 @media 查询的好讨论。其中之一在这里：CSS media queries work for iPad2, iPad Air, Samsung Galaxy, large screens but not the usual desktop screens。

这些讨论发生在 iPad Air 出现之前。 iPad Air 的视口为 2048 x 1536。我找不到它的 webkit-min-device-pixel-ratio。我想专门针对 Air，因为我的 AJAX 站点缩小到它的一半大小。此网站仅供横向使用。

所以...

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
(-webkit-min-device-pixel-ratio: 1.0)

-> 针对旧 iPad 2 的

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
(-webkit-min-device-pixel-ratio: 2.0)

-> 针对 iPad 3 和 4 视网膜，但不针对 Air

我已经尝试过各种变体

@media only screen 
and (min-device-width : 1536px) 
and (max-device-width : 2048px) 
and (-webkit-min-device-pixel-ratio: 2.0)

尝试让 Air 做出反应。谁有过为新 Airs 开发的经验？

【问题讨论】：

是 Safari 在 Air 上呈现一半大小。不是铬。您如何进行浏览器检测？

【参考方案1】：

您需要视口大小http://viewportsizes.com/?filter=ipad Air 也有 1024x768 的视口

【参考方案2】：

我在为新的 ipad air 3 开发时遇到了问题。我几乎没有找到有关媒体查询视口大小的确切信息。一位朋友告诉我它的尺寸与 ipad pro（10.5 英寸）相同，所以我去了以下苹果开发者网站： https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iosDeviceCompatibility/Displays/Displays.html

从表 2-1 中获取 UIKit Size 很重要。毕竟我针对 ipad air 3（横向模式）的查询看起来像这样：@media all and (device-width: 834px) and (device-height: 1112px) and (orientation:landscape)