iPhone 6 和 6 Plus 媒体查询

Posted 2023-03-06

【中文标题】iPhone 6 和 6 Plus 媒体查询

【英文标题】：iPhone 6 and 6 Plus Media Queries

【发布时间】：2014-11-03 17:25:42

【问题描述】：

有没有人知道针对 iPhone 6 和 6 Plus 的媒体查询的特定屏幕尺寸？

还有，图标大小和启动画面？

【参考方案1】：

iPhone 6

风景

@media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
 

肖像

@media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
 

如果您愿意，可以使用 (device-width : 375px) 和 (device-height: 559px) 代替 min- 和 max- 设置。

没有必要使用所有这些设置，也不是所有可能的设置。这些只是大多数可能的选项，因此您可以挑选满足您需求的选项。

用户代理

在装有 ios 9.0 (13A4305g) 的 iPhone 6（型号 MG6G2LL/A）上测试

# Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (Khtml, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53

启动图片

750 x 1334 (@2x) 用于纵向 横向 1334 x 750 (@2x)

应用图标

120 x 120

---

iPhone 6+

风景

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
 

肖像

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
 

启动图片

1242 x 2208 (@3x) 用于纵向 横向 2208 x 1242 (@3x)

应用图标

180 x 180

---

iPhone 6 和 6+

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
 

---

预测

根据the Apple website，iPhone 6 Plus 的分辨率为 401 像素/英寸，分辨率为 1920 x 1080。iPhone 6 的较小版本为 1334 x 750，PPI 为 326。

因此，假设信息正确，我们可以为 iPhone 6 编写媒体查询：

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
 

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
 

请注意，device-aspect-ratio 将在 http://dev.w3.org/csswg/mediaqueries-4/ 中弃用并替换为 aspect-ratio

最小宽度和最大宽度可能类似于 1704 x 960。

---

Apple Watch（推测）

由于（据我所知）还没有正式的规格表，因此手表上的规格仍然有点投机性。但苹果确实在this press release 中提到，Watch 将提供两种尺寸...... 38 毫米和 42 毫米。

进一步假设.. 这些尺寸是指屏幕尺寸而不是表盘的整体尺寸，这些媒体查询应该可以工作.. 而且我相信您可以在不牺牲的情况下给或花几毫米来覆盖任何一种情况任何不需要的定位，因为..

@media (!small) and (damn-small), (omfg)  

或

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
 

值得注意的是，来自 W3C 的 Media Queries Level 4 目前仅作为第一个公共草案提供，一旦可用，将带来许多针对此类小型可穿戴设备设计的新功能。

【讨论】：

这个呢？ ***.com/questions/25762277/…

@davidcondrey 您回答中的 Predicted 部分是什么？它与您在上面提供的所有（正确）参数相矛盾，并且该 Predicted 部分中的媒体查询是愚蠢的 - 宽度 = 1080 和 750？媒体查询设备宽度不是基于设备的实际物理像素数，您清楚地知道这一点。该部分是由其他人添加的吗？

@LearningFast，我最初在这些设备可用之前写了这个答案，并猜测了这些值可能是什么。后来我在设备发布后用正确的值编辑了我的答案。我只是把最初的猜测留给我猜的后代。

这困扰了我这么久-.-，谢谢@davidcondrey U da man！ :)

【参考方案2】：

让您知道 iPhone 6 谎称它的最小宽度。它认为它是 320 而不是假设的 375。

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) 

这是我唯一可以针对 iPhone 6 工作的事情。6+ 使用这种方法可以正常工作：

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)

【讨论】：

感谢您的反馈，我正在努力真正做到正确，这很难:(

【参考方案3】：

这就是现在对我有用的东西：

iPhone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) 

iPhone 6+

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)

【讨论】：

此解决方案完美运行，还添加了方向。谢谢菲奥娜！

【参考方案4】：

这适用于我的 iphone 6

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)  



/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape)  



/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait)  



/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape)  



/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) 


/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait) 



/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape) 

【参考方案5】：

您必须使用针对不同屏幕尺寸的媒体查询来定位屏幕尺寸。

iphone：

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
 

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
 

对于桌面版本：

@media only screen (max-width: 1080)

【参考方案6】：

iPhone X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */  

iPhone 6+、7+ 和 8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */  

iPhone 6、6S、7 和 8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */  

来源：Media Queries for Standard Devices

【参考方案7】：

对于 iPhone 5，

@media screen and (device-aspect-ratio: 40/71)

适用于 iPhone 6、7、8

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

适用于 iPhone 6+、7+、8+

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

到目前为止对我来说工作正常。