iPad与iPad Air的媒体查询

Question

在StackOverflow上已经有两个关于@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的Retina显示屏，但不包括Air

我尝试了多种变化的方法

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

有谁有开发新Air的经验，想尝试让Air做出反应。

- Lilian

---

是Safari在Air上呈现了一半大小，而不是Chrome。你如何进行浏览器检测？ - Lilian

Answer 1

您需要查看视口大小，请访问http://viewportsizes.com/?filter=ipad。Air也有1024x768的视口大小。

- Nikolay Bronskiy

Answer 2

为了针对iPad和iPad Air使用媒体查询来定位特定样式，您可以利用这两种设备之间的屏幕大小和分辨率差异。以下是一些可用的媒体查询：

iPad

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: portrait) {
  /* CSS styles specific to iPad portrait mode */
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: landscape) {
 /* CSS styles specific to iPad landscape mode */
}

iPad Air

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
 /* CSS styles specific to iPad Air portrait mode */
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
 /* CSS styles specific to iPad Air landscape mode */
}

希望这能帮到你

- Deen

Answer 3

我在为新的iPad Air 3进行开发时遇到了问题。 我几乎找不到有关媒体查询视口大小的确切信息。 一位朋友告诉我它与iPad Pro（10.5英寸）大小相同，因此我转到以下苹果开发者网站： https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

重要的是从表2-1中获取UIKit尺寸。 最终，我的针对iPad Air 3（横向模式）的查询如下所示：@media all and (device-width: 834px) and (device-height: 1112px) and (orientation:landscape) {}

- Valentin J

Answer 4

你可以试试这个，我试过了，它有效。

iPad Air第五代：

@media only screen and (width: 820px) and (height: 1106px) {}
@media only screen and (width: 1180px) and (height: 746px) {}

- sayooj surendran