css3 – iPhone 6和6 Plus媒体查询

前端之家收集整理的这篇文章主要介绍了css3 – iPhone 6和6 Plus媒体查询前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有谁知道具体的屏幕尺寸来针对iPhone 6和6 Plus的媒体查询

还有,图标大小和闪屏?

解决方法

iPhone 6

>景观

  1. @media only screen
  2. and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
  3. and (max-device-width : 667px) // or 41.6875em
  4. and (width : 667px) // or 41.6875em
  5. and (height : 375px) // or 23.4375em
  6. and (orientation : landscape)
  7. and (color : 8)
  8. and (device-aspect-ratio : 375/667)
  9. and (aspect-ratio : 667/375)
  10. and (device-pixel-ratio : 2)
  11. and (-webkit-min-device-pixel-ratio : 2)
  12. { }

>纵向

  1. @media only screen
  2. and (min-device-width : 375px) // or 213.4375em
  3. and (max-device-width : 667px) // or 41.6875em
  4. and (width : 375px) // or 23.4375em
  5. and (height : 559px) // or 34.9375em
  6. and (orientation : portrait)
  7. and (color : 8)
  8. and (device-aspect-ratio : 375/667)
  9. and (aspect-ratio : 375/559)
  10. and (device-pixel-ratio : 2)
  11. and (-webkit-min-device-pixel-ratio : 2)
  12. { }

如果你喜欢你可以使用(设备宽度:375px)和(设备高度:559px)代替最小和最大设置。

不必使用所有这些设置,这些设置不是所有可能的设置。这些只是大多数可能的选项,所以你可以选择和选择满足您的需求。
>用户代理

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

  1. # Safari
  2. 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
  3. # Google Chrome
  4. 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)
  5. # Mercury
  6. 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

>景观

  1. @media only screen
  2. and (min-device-width : 414px)
  3. and (max-device-width : 736px)
  4. and (orientation : landscape)
  5. and (-webkit-min-device-pixel-ratio : 3)
  6. { }

>纵向

  1. @media only screen
  2. and (min-device-width : 414px)
  3. and (max-device-width : 736px)
  4. and (device-width : 414px)
  5. and (device-height : 736px)
  6. and (orientation : portrait)
  7. and (-webkit-min-device-pixel-ratio : 3)
  8. and (-webkit-device-pixel-ratio : 3)
  9. { }

>启动图像

> 1242 x 2208(@ 3x)用于肖像
> 2208 x 1242(@ 3x)的风景

>应用程序图标

> 180×180

iPhone 6和6

  1. @media only screen
  2. and (max-device-width: 640px),only screen and (max-device-width: 667px),only screen and (max-width: 480px)
  3. { }

预料到的

根据the Apple website,iPhone 6 Plus将有每英寸401像素和1920 x 1080.更小的版本的iPhone 6将是1334 x 750与326 PPI。

因此,假设信息是正确的,我们可以为iPhone 6写一个媒体查询

  1. @media screen
  2. and (min-device-width : 1080px)
  3. and (max-device-width : 1920px)
  4. and (min-resolution: 401dpi)
  5. and (device-aspect-ratio:16/9)
  6. { }
  7.  
  8. @media screen
  9. and (min-device-width : 750px)
  10. and (max-device-width : 1334px)
  11. and (min-resolution: 326dpi)
  12. { }

请注意,http://dev.w3.org/csswg/mediaqueries-4/将于http://dev.w3.org/csswg/mediaqueries-4/淘汰,并以aspect-ratio替代

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

苹果手表(投机)

手表上的规格仍然有点推测,因为(据我所知)目前还没有官方规格表。但苹果在this press release提到,手表将有两种尺寸。38毫米和42毫米。

进一步假设..那些大小指的是屏幕尺寸,而不是手表面的整体大小这些媒体查询应该工作..我相信你可以给或采取几毫米,以涵盖任何情况,不牺牲任何不必要的目标因为..

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

要么

  1. @media
  2. (max-device-width:42mm)
  3. and (min-device-width:38mm)
  4. { }

值得注意的是,来自W3C的Media Queries Level 4目前只能作为第一次公开草稿,一旦可以使用,将带来许多新功能设计与这样的较小的可穿戴设备。

猜你在找的CSS相关文章