iPhone 5 CSS 媒体查询 [英] iPhone 5 CSS media query

问题描述

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

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

参考:
媒体查询@W3C
iPhone 机型比较
纵横比计算器

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