问题描述
iPhone 5有一个更长的屏幕，它不捕获我的网站的移动视图。
The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?
我当前的媒体查询是这样的：
My current media query is this:
@media only screen and (max-device-width: 480px) {}
推荐答案
另一个有用的媒体功能是 device-aspect-ratio 。
Another useful media feature is device-aspect-ratio.
请注意， iPhone 5长宽比不是16：9 。事实上是40:71。
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone< 5：
@media screen and（device-aspect-ratio：2/3）{}
iPhone < 5:@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5：
@media screen and（device-aspect-ratio：40/71）{}
iPhone 5:@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6：
@media screen and（device-aspect-ratio：375/667）{}
iPhone 6:@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus：
@media screen and（device-aspect-ratio：16/9） {}
iPhone 6 Plus:@media screen and (device-aspect-ratio: 16/9) {}
iPad：
@media screen and（device-aspect-ratio ：3/4）{}
参考：
这篇关于iPhone 5 CSS媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！