iPhone 6和6 Plus媒体查询

Answers:

166

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

预料到的

根据Apple网站的数据，iPhone 6 Plus的每英寸像素为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) 
{ }

注意 设备纵横比将在http://dev.w3.org/csswg/mediaqueries-4/中弃用，并替换为纵横比

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

Apple Watch（投机性）

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

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

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

要么

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

值得注意的是，W3C的Media Queries Level 4当前仅作为第一份公共草案提供，一旦投入使用，将带来很多新功能，这些功能是针对此类较小的可穿戴设备而设计的。

— 大卫·康德雷
source
— Sithys
@davidcondrey答案中的“预测”部分是什么？它与您在上方提供的所有（正确）参数相矛盾，并且“预测”部分中的媒体查询非常愚蠢–宽度= 1080和750？媒体查询设备的宽度不是基于设备的实际物理像素计数，您可以清楚地知道。该部分是否由其他人添加？
— LearningFast
@LearningFast，我最初在这些设备可用之前就写了这个答案，并猜测了可能的值。设备发布后，我后来用正确的值编辑了答案。我只是留下了我猜测的后代原始猜测。
— davidcondrey，2016年
这让我困扰了很多时间-.-，谢谢@davidcondrey U！:)
— nikola_wd
20

这就是现在为我工作的东西：

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)
— 菲奥娜-myaccessible.website
source
此解决方案效果很好，也增加了方向。谢谢菲奥娜！
— nach 2014年
7

这对我适用于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){ 

}
— 活跃的
source
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)
{

}
— 开发PHP
source
感谢您提供的反馈意见，我正在努力使其正确执行，这非常困难:(
— MattT
3

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

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

}
— 拉姆·塔库尔
source
3

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

}

来源：标准设备的媒体查询

— Simhumileco
source
1

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

到目前为止，对我来说还不错。

— 杰加迪什
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.