iPhone 6和6 Plus媒体查询

时间:2014-09-10 06:52:44

标签: ios css3 media-queries iphone-6 iphone-6-plus

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

此外,图标大小和启动画面?

7 个答案:

答案 0 :(得分:162)

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-设置。

    没有必要使用所有这些设置,这些并非所有可能的设置。这些只是大多数可能的选项,因此您可以选择满足您需求的任何选项。

  • 用户代理

    使用我的iPhone 6(型号MG6G2LL / A)和iOS 9.0(13A4305g)测试

    # 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)for portrait
    • 1334 x 750(@ 2x)for landscape
  • 应用图标

    • 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)for portrait
    • 2208 x 1242(@ 3x)for landscape
  • 应用图标

    • 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,具有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/将被弃用,并替换为

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


Apple Watch(推测)

手表上的规格仍然有点推测,因为(据我所知)尚未有官方规格表。但Apple在this press release确实提到手表有两种尺寸可供选择.. 38mm和42mm。

进一步假设..这些尺寸是指屏幕尺寸而不是Watch面孔的整体尺寸,这些媒体查询应该有效。而且我相信你可以给予或花几毫米来覆盖任何一种情况而不会牺牲任何不受欢迎的定位,因为..

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

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

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

答案 1 :(得分:19)

这就是我现在正在做的事情:

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)

答案 2 :(得分: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){ 

}

答案 3 :(得分: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)
{

}

答案 4 :(得分: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){

}

答案 5 :(得分: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) */ { 

}

来源:Media Queries for Standard Devices

答案 6 :(得分:1)

对于iPhone 5,

@media screen and (device-aspect-ratio: 40/71)

for 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)

截至目前,我的工作正常。