本文介绍了iPhone 5 CSS媒体查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-29 16:06