iPhone 6和6 Plus媒体查询

• 景观

  @media only screen and (min-device-width : 375px) // or 213.4375em or 3in or 9cmand (max-device-width : 667px) // or 41.6875emand (width : 667px) // or 41.6875emand (height : 375px) // or 23.4375emand (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.4375emand (max-device-width : 667px) // or 41.6875emand (width : 375px) // or 23.4375emand (height : 559px) // or 34.9375emand (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）上进行了测试

    # SafariMozilla/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 ChromeMozilla/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)# MercuryMozilla/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

• 景观

  @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

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

根据Apple网站的数据，iPhone 6Plus的每英寸像素为401像素，分辨率为1920 x1080。iPhone6的较小版本为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并将其替换为Aspect-ratio

最小宽度和最大宽度可能约为1704 x 960。

Watch上的规格仍然有些投机，因为（据我所知）还没有正式的规格表。但是苹果确实在本新闻稿中提到手表将有两种尺寸可供选择：38mm和42mm。

进一步假设..这些尺寸是指屏幕尺寸，而不是Watch正面的整体尺寸，这些媒体查询应该可以使用。而且我敢肯定，在不牺牲任何不必要定位的前提下，您可以花几毫米来覆盖这两种情况因为..

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

要么

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

值得注意的是，W3C的Media QueriesLevel4当前仅作为第一稿公开发布，一旦投入使用，将带来许多新功能，这些功能是针对此类较小的可穿戴设备而设计的。