iPhone 5 CSS媒体查询

Question

iPhone 5有一个更长的屏幕，它没有捕捉我的网站的移动视图。什么是iPhone 5的新响应式设计查询，我可以与现有的iPhone查询结合使用吗？我目前的媒体查询是这样的：@media only screen and (max-device-width: 480px) {}

Answer 1

另一个有用的媒体功能是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) {}

Answer 2

有这个，我赞同这个博客：

@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。这是另一种方法，它只针对一维640px（560px，由于一些奇怪的显示像素异常）和一个960px（iPhone <5）和1136px（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 */

}