问题：
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 设备上运行良好（我们正在为 Android 使用 Crosswalk，所以也考虑 Chrome），但似乎不适用于 iOS8/Safari。
更新：
只是有一个想法。现在我将使用(max-height: 175vw)，这应该可以修复所有Android设备（至少我们支持的4.4）和iOS9设备。之后，我可能只需要对iPhone4和/或iPad进行额外的媒体查询。
现在似乎媒体查询支持纵横比，因为我刚刚在当前版本的Firefox，Chrome和Safari中进行了测试（见演示）。
@media screen and (max-aspect-ratio: 1/1) {
.landscape { display: none; }
}
请注意，您必须以除法的形式指定比率（例如 16/9）。不支持浮点值（例如 1.7777）。
当然，在媒体查询中，min-aspect-ratio在功能上等同于max-width在视口单位（vh）中具有相应的值 - 但浏览器更好地支持。
在真正支持视口单位之前，您可以使用cordova-anyscreen来完成您想要的操作。 https://github.com/biodiv/cordova-anyscreen .
您还可以支持Android低至4.0，甚至2.3（这可能并不重要）和iOS 6 +。
比例布局是参考尺寸为 1080*1920 的屏幕完成的。所以如果你想要50%的宽度，你会使用540px。显示由脚本测量，并重新计算与屏幕匹配的 540px。