iPhone 5 CSS媒体查询

iPhone 5的屏幕更长，无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询，可以与现有iPhone查询结合使用吗？

我当前的媒体查询是这样的：

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

另一个有用的媒体功能是device-aspect-ratio。

请注意，iPhone 5没有16：9的宽高比。实际上是40:71。

iPhone <5：
@media screen and (device-aspect-ratio: 2/3) {}

iphone 5：
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6：
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus：
@media screen and (device-aspect-ratio: 16/9) {}

iPad：
@media screen and (device-aspect-ratio: 3/4) {}

参考：
媒体查询@ W3C
iPhone模型比较
宽高比计算器

我将这个归功于此博客：

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

请记住，它会对iPhone 5做出反应，而不是针对该设备上安装的特定iOS版本。

要与现有版本合并，您应该可以用逗号分隔它们：

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

注意：我还没有测试上面的代码，但是我之前已经测试了逗号分隔的@media查询，它们工作得很好。

请注意，以上内容可能会影响其他具有类似比率的设备，例如Galaxy Nexus。这是另一种方法，该方法仅针对尺寸为640像素（由于某些奇怪的显示像素异常而导致像素为560像素）且介于960像素（iPhone <5）和1136像素（iPhone 5）之间的设备。

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

上面列出的所有这些使用max-device-width或max-device-height用于媒体查询的答案都存在非常强大的错误：它们还针对许多其他流行的移动设备（可能是不需要的且从未经过测试，或者将来会投放市场）。

该查询将适用于屏幕较小的任何设备，并且可能会破坏您的设计。

结合类似的特定于设备的媒体查询（针对HTC，Samsung，iPod，Nexus ...），此做法将引发定时炸弹。为了简化设计，这种想法会使CSS成为不受控制的意大利面条。您永远无法测试所有可能的设备。

请注意，唯一始终以IPhone5为目标且没有其他目标的媒体查询是：

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

请注意，此处检查的是确切的宽度和高度，而不是最大宽度。

现在，解决方案是什么？如果您要编写一个在所有可能的设备上看起来都不错的网页，则最佳做法是使用降级

/ *降级模式，我们只能确定屏幕宽度，否则这种变化将由纵向变为横向* /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

如果您的网站访问者中有30％以上来自移动设备，请颠倒此方案，以移动设备优先的方式。min-device-width在这种情况下使用。这将加快移动浏览器的网页渲染速度。

对我来说，完成这项工作的查询是：

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5纵向和横向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5风景

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5纵向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

针对我的Phonegapp应用，没有任何响应对我有用。

作为以下链接点，以下解决方案有效。

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

只是非常快速的补充，因为我一直在测试一些选项，并且一路错过了这一点。确保您的页面具有：

<meta name="viewport" content="initial-scale=1.0">

对于iPhone5以及在移动设备媒体功能数据库中的其他智能手机，您可以相当轻松地获得答案：

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

您甚至可以在同一网站的测试页上获得自己的设备值。

（免责声明：这是我的网站）

afaik no iPhone使用的像素比例为1.5

iPhone 3G / 3GS：（-webkit-device-pixel-ratio：1）iPhone 4G / 4GS / 5G：（-webkit-device-pixel-ratio：2）

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

您可能应该将“ -webkit-min-device-pixel-ratio”降低到1.5才能赶上所有iPhone？

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}