iPhone 6和6 Plus媒体查询

MattT:

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

另外,图标大小和初始屏幕?

davidcondrey:

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

预料到的

根据苹果公司的网站,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当前仅作为第一稿公开发布,一旦投入使用,将带来许多新功能,这些功能是针对此类较小的可穿戴设备而设计的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章