iPhone 5的屏幕更长,无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询,可以与现有iPhone查询结合使用吗?
我当前的媒体查询是这样的:
@media only screen and (max-device-width: 480px) {}
另一个有用的媒体功能是device-aspect-ratio。
device-aspect-ratio
请注意, iPhone 5没有16:9的宽高比 。实际上是40:71。
iPhone <5: @media screen and (device-aspect-ratio: 2/3) {}
@media screen and (device-aspect-ratio: 2/3) {}
iphone 5: @media screen and (device-aspect-ratio: 40/71) {}
@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6: @media screen and (device-aspect-ratio: 375/667) {}
@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus: @media screen and (device-aspect-ratio: 16/9) {}
@media screen and (device-aspect-ratio: 16/9) {}
iPad: @media screen and (device-aspect-ratio: 3/4) {}
@media screen and (device-aspect-ratio: 3/4) {}