一尘不染

iPhone 5 CSS媒体查询

css

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

我当前的媒体查询是这样的:

@media only screen and (max-device-width: 480px) {}

阅读 500

收藏
2020-05-16

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

2020-05-16