如何在媒体查询中定位 iPhone 5 的独特宽高比？

iPhone 5 媒体查询难​​题

对于 iPhone 5，常规最大设备宽度查询是不够的。由于 iPhone 5 拥有更长的屏幕，因此它完全跳过了移动视图。

要进行调整，请考虑将设备宽高比纳入您的媒体查询中。有趣的是，iPhone 5 的长宽比不是 16:9，而是 40:71。

@media screen and (device-aspect-ratio: 40/71) {}

这样，您可以专门针对 iPhone 5，同时记住其他 iPhone 型号：

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

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

通过在媒体查询中使用设备宽高比，您可以确保您的网站能够完美适应不同的 iPhone 型号，包括更宽的 iPhone 5 及其独特的长宽比。

以上是如何在媒体查询中定位 iPhone 5 的独特宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！