iPhone 6和6 Plus媒体查询 [英] iPhone 6 and 6 Plus Media Queries

查看：200
本文介绍了iPhone 6和6 Plus媒体查询的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



此外，图标大小和闪屏如何？

解决方案

iPhone 6




  • Landscape 

      @media only screen 
     and（min-device-width：375px）// or 213.4375em or 3in or 9cm 
    和（max-device-width：667px）//或41.6875em 
    和（width：667px）//或41.6875em 
    和（height：375px）//或23.4375em 
    和（orientation：landscape）
    和（color：8）
    和（device-aspect-ratio：375/667）
    和（aspect-ratio：667/375）
    和（device-pixel-ratio：2）
    和（-webkit-min-device-pixel-ratio：2）
     {}


  • 肖像

      @media only screen 
    和（min-device-width：375px）//或213.4375em 
    和（max-device-width：667px）//或41.6875em 
    和（width：375px）//或23.4375em 
     and（height：559px）//或34.9375em 
     and（orientation：portrait）
     and（color：8）
     and（device-aspect-ratio：375/667 ）
    和（aspect-ratio：375/559）
    和（device-pixel-ratio：2）
    和（-webkit-min-device-pixel-ratio：2）
     {}

    如果您愿意，可以使用 -width：375px）和（device-height：559px） c>和 max - 设置。



    这些设置，并且这些不是所有可能的设置。


  • 用户代理


    $ b 

      测试我的iPhone 6（型号MG6G2LL / A）和iOS 9.0（13A4305g） > ＃Safari 
     Mozilla / 5.0（iPhone; CPU iPhone OS 9_0像Mac OS X）AppleWebKit / 601.1.39（KHTML，像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，如Gecko）版本/ 5.1.3 Safari / 534.53.10（000102）
    ＃Mercury 
     Mozilla / 5.0（iPhone; CPU iPhone OS 7_0_4，如Mac OS X）AppleWebKit / 537.51.1（KHTML，像Gecko）版本/ 7.0 Mobile / 11B554a Safari / 9537.53


  • 启动图片




    • 750 x 1334 2x）

    • 1334 x 750（@ 2x）for landscape


  • 应用图标




    • 120 x 120






iPhone 6 +




  • Landscape 

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


b $ b



预测



根据苹果网站的iPhone 6 Plus将有401像素每英寸和1920 x 1080.更小的版本的iPhone 6将是1334 x 750与326 PPI。 / p>

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

  @media screen 
 and（min-device-width：1080px）
 and（max-device-width：1920px）
 and （min-resolution：401dpi）
和（device-aspect-ratio：16/9）
 {} 
 
 @media屏幕
和width：750px）
 and（max-device-width：1334px）
 and（min-resolution：326dpi）
 {}

请注意，设备纵横比 4 /> http://dev.w3.org/csswg/mediaqueries-4/ ，并替换为 aspect-ratio



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





Apple Watch（投机）



在手表仍然有点推测，因为（据我所知）目前还没有官方规格表。但是苹果在这个新闻稿，手表将有两种尺寸.. 38mm和42mm。



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

  @media（！small）和（damn-small），（omfg）{}

或

  @media 
（max-device-width：42mm） 
和（min-device-width：38mm）
 {}

值得注意的是，来自W3C的媒体查询4级目前只能作为首次公开草稿，一旦可供使用，带来了很多新的功能，设计了这样的较小的可穿戴设备。


Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus?

Also, the icon sizes and splash screens?

解决方案

iPhone 6

  • Landscape

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

  • Portrait

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

    if you prefer you can use (device-width : 375px) and (device-height: 559px) in place of the min- and max- settings.

    It is not necessary to use all of these settings, and these are not all the possible settings. These are just the majority of possible options so you can pick and choose whichever ones meet your needs.

  • User Agent

    tested with my iPhone 6 (model MG6G2LL/A) with 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

  • Launch images

    • 750 x 1334 (@2x) for portrait
    • 1334 x 750 (@2x) for landscape

  • App icon

    • 120 x 120

iPhone 6+

  • Landscape

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

  • Portrait

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

  • Launch images

    • 1242 x 2208 (@3x) for portrait
    • 2208 x 1242 (@3x) for landscape

  • App icon

    • 180 x 180

iPhone 6 and 6+

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

Predicted

According to the Apple website the iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080. The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI.

So, assuming that information is correct, we can write a media query for the 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) 
{ }

Note that will be deprecated in http://dev.w3.org/csswg/mediaqueries-4/ and replaced with

Min-width and max-width may be something like 1704 x 960.

Apple Watch (speculative)

Specs on the Watch are still a bit speculative since (as far as I'm aware) there has been no official spec sheet yet. But Apple did mention in this press release that the Watch will be available in two sizes.. 38mm and 42mm.

Further assuming.. that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work.. And I'm sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because.. 

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

or

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

It's worth noting that Media Queries Level 4 from W3C currently only available as a first public draft, once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind.

这篇关于iPhone 6和6 Plus媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆