问题：
iOS8 / Safari似乎不理解/支持包含视口单元的媒体查询，例如：(max-height: 175vw)。它在iOS9设备上运行得很好。我尝试使用max-aspect-ratio和max-device-aspect-ratio，但它们也被忽略了。
有没有人知道为什么这不起作用或知道任何其他方式创建与比例/宽高比无关而不是特定屏幕尺寸的媒体查询？
解释（或者，为什么我甚至需要这个？）
我们正在使用Cordova处理ios / android应用程序，而不必担心断点和所有不同的屏幕尺寸，我们决定使用视口单元非常广泛，只担心一些宽高比/屏幕尺寸比例。
所以，现在，我们在iPhone 5,6,6 +，大多数Android设备（以及任何其他可以共享这些比例或其他任何设备的设备）等设备上运行的样式都很好。
现在，iPhone4和iPad等设备的比例差异很大;他们说的更“正方形”。为了解决这个问题，我们只需要7/4及以下比例的媒体查询，而(max-height: 175vw)在iOS9和Android设备上运行得很好（我们使用的是Crosswalk for Android，所以请考虑使用Chrome），但不能似乎可以在iOS8 / Safari上运行。
更新
刚才有个主意。现在我将使用(max-height: 175vw)，这应该可以修复所有Android设备（至少4.4我们支持的设备）和iOS9设备。之后，我可能只需要为iPhone4和/或iPad提供额外的媒体查询。
答案 0 :(得分：1)
目前，媒体查询似乎支持宽高比，因为我刚刚在当前版本的Firefox，Chrome和Safari中进行了测试（请参阅demo）。
@media screen and (max-aspect-ratio: 1/1) {
.landscape { display: none; }
}
请注意，您必须specify the ratio in form of a division（例如16/9）。不支持浮点值（例如1.7777）。
当然，在媒体查询中，min-aspect-ratio在功能上与max-width等效，并且在视口单元（vh）中具有相应的值 - 但浏览器会更好地支持它。
答案 1 :(得分：0)
在真正支持视口单元之前，您可以使用cordova-anyscreen来完成您想要的任务。 https://github.com/biodiv/cordova-anyscreen。
你也可以支持Android降至4.0，甚至可能支持2.3（可能不重要）和iOS 6+。
比例布局是参考尺寸为1080 * 1920的屏幕完成的。因此，如果你想要50％的宽度，你会使用540px。显示由脚本测量，它重新计算与屏幕匹配的540px。