Ios iPhone 6和6 Plus媒体查询

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

此外，图标大小和闪屏？

iPhone6

• 景观

  @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 : 414px) 
      and (max-device-width : 736px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 3) 
  { }
  

• 肖像画

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

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

  如果愿意，您可以使用

  （设备宽度：375px）

  和

  （设备高度：559px）

  代替

  最小值-

  和

  最大值-

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

• 用户代理
  使用iOS 9.0（13A4305g）的iPhone 6（型号MG6G2LL/A）进行测试

• 发布图像
  • 750 x 1334（@2x）用于人像
  • 景观用1334 x 750（@2x）
• 应用程序图标
  • 120 x 120

---

iphone6+

• 景观

  @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 : 414px) 
      and (max-device-width : 736px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 3) 
  { }
  

• 肖像画

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

  @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

---

iphone6和iphone6+

---

预测 根据iphone6plus，每英寸将有401个像素，为1920x1080。较小版本的iPhone6将为1334 x 750，PPI为326

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

@媒体屏幕
和（最小设备宽度：1080px）
和（最大设备宽度：1920像素）
和（最小分辨率：401dpi）
和（设备纵横比：16/9）
{ }
@媒体屏幕
和（最小设备宽度：750px）
和（最大设备宽度：1334px）
和（最小分辨率：326dpi）
{ }

请注意，将在中弃用并替换为

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

---

苹果手表（投机性） 手表上的规格仍然有点推测性，因为（据我所知）还没有正式的规格表。但苹果确实提到这款手表将有两种尺寸。。38毫米和42毫米

进一步假设。。这些尺寸指的是屏幕尺寸，而不是手表表面的整体尺寸。这些媒体查询应该有效。。我相信你可以用几毫米来覆盖这两种情况，而不会牺牲任何不必要的目标，因为

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

或

---

值得注意的是，W3C目前仅作为第一个公开草案提供，一旦提供使用，它将带来许多新功能，这些功能都是为更小的可穿戴设备设计的，就像这样。

你知道iPhone 6的最小宽度是多少。它认为它是320，而不是它应该是375

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

}

这是我唯一能针对iPhone6进行的工作。使用此方法，6+可以很好地工作：

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

}

---

这就是我现在的工作：

iphone6

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

iphone6+

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

---

这对我的iphone6来说很有用

/*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){ 

}

---

您必须使用不同屏幕大小的媒体查询来确定屏幕大小

对于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){

}

iPhoneX iPhone 6+、7+和8+ iphone6、6S、7和8 来源：

对于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)

---

到目前为止，我的工作还不错。

这个呢@大卫康德利你的答案中的预测部分是怎么回事？它与上面提供的所有（正确的）参数相矛盾，并且预测部分中的媒体查询是goofy–width=1080和750？媒体查询设备宽度不是基于设备的实际物理像素计数，这一点您很清楚。这个部分是别人添加的吗？@LearningFast，我最初在这些设备可用之前写下了这个答案，并猜测了可能的值。在设备发布后，我用正确的值编辑了我的答案。我只是把最初的猜测留给了后代，我想。这让我困扰了这么久-。-，谢谢@davidcondrey U da man！：）谢谢你的反馈，我正在努力使它正确，这相当困难：（这个解决方案工作得很好，也增加了方向。谢谢菲奥娜！

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

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