iPhone 6和6 Plus媒体查询

有谁知道特定的屏幕大小，针对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-设置。

  没有必要使用所有这些设置，而这些设置并不是全部。 这些只是大部分可能的选项，所以您可以select和select符合您的需求的选项。

• 用户代理

  用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）景观

• App图标

  • 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）景观

• App图标

  • 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) { } 

---

预料到的

根据苹果的网站 ，iPhone 6 Plus将会有每英寸401像素和1920×1080.较小版本的iPhone 6将是1334×750和326 PPI。

所以，假设信息是正确的，我们可以为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) { } 

请注意， 设备宽高比将在http://dev.w3.org/csswg/mediaqueries-4/中弃用，并replace为长宽比;

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

---

Apple Watch（猜测）

关于手表的规格仍然有点推测，因为（据我所知）还没有官方的规格表。 但苹果在本新闻稿中确实提到手表将有两种尺寸：38mm和42mm。

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

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

要么

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

值得注意的是，W3C的第4级媒体查询目前仅作为第一个公共草案提供，一旦可以使用，就会带来许多用这种小型可穿戴设备devise的新function。

Answer 2

这是我现在正在为我工​​作：

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) 

Answer 3

这对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){ } 

Answer 4

只是所以你知道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) { } 

Answer 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){ }