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) {&nbsp; &nbsp; /* 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) {&nbsp; &nbsp; /* iPhone only */}注意：我没有测试过上面的代码，但之前我已经测试了逗号分隔的@media查询，并且它们工作得很好。请注意，以上可能会遇到其他一些具有相似比率的设备，例如Galaxy Nexus。这是另一种方法，它只针对一维640px（560px，由于一些奇怪的显示像素异常）和一个960px（iPhone <5）和1136px（iPhone 5）之间的设备。@media&nbsp; &nbsp; only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),&nbsp; &nbsp; only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {&nbsp; &nbsp; /* iPhone only */}