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

问题描述

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

参考：

媒体查询@ W3C


iPhone模型比较


比率计算器

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