CSS中目标设备纵横比低于某个阈值

我的脑子坏了

如何针对设备纵横比低于16/9的所有设备。i、 你比16/9还胖吗？这似乎不起作用

这仅适用于iOS/Android cordova应用程序中的肖像

@media only screen and (max-device-aspect-ratio: 16/9) {
}

---

你试过一般的纵横比吗？如果设备横向宽度大于16/9，且您处于纵向，请尝试：

@media ALL and (max-aspect-ratio: 9/16) { 
    /* style your super tall content here */
}

JS小提琴：

无论哪种方式，浏览器都应该占据设备的屏幕，在这里，您不必担心方向问题。请注意，在小提琴中，媒体查询中的样式只有在您变得超高（比9/16更瘦）时才会激活。

针对所有设备/分辨率；在我看来，这非常困难，因为它们有不同的默认移动视口设置和默认移动浏览器设置。通常情况下，您必须以不同的方式对待每个受支持的设备，有时在处理媒体、视频、动画等时会有很大的不同

您应该坚持支持每个设备和分辨率

例如

iPhone（移动Safari）分辨率X、Y、Z

iPad（移动Safari）分辨率X、Y、Z

Android（Chrome Webkit）分辨率X、Y、X

黑莓（Opera）分辨率X、Y、X

---

你明白了…

纵横比和设备纵横比是两种不同的媒体特性。这更可能是一个使用哪一个的问题，而不是简单地做相反的事情——尽管根据问题中给出的内容，我不能肯定。它们当然是不同的媒体查询，但浏览器是浏览器，如果他问的是横向中设备纵横比的样式，长宽比通常适用于此应用程序。