ios - iPhone 6 和 6 Plus 媒体查询

Question

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

此外，图标大小和启动画面？

Answer 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(推测)

watch 的规范仍然有点推测，因为(据我所知)还没有官方规范表。但 Apple 在 this press release 中确实提到了 watch 将有两种尺寸可供选择。38 毫米和 42 毫米。

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

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

或

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

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