css - "Proportional"使用视口(viewport)单位的媒体查询

Question

问题:

iOS8/Safari 似乎不理解/不支持包含视口(viewport)单元的媒体查询，例如:(max-height: 175vw)。不过它在 iOS9 设备上工作得很好。我尝试使用 max-aspect-ratio 和 max-device-aspect-ratio 但它们也被忽略了。

有没有人知道为什么这不起作用或知道创建与比例/宽高比无关而不是特定屏幕尺寸的媒体查询的任何其他方法？

解释(或者，为什么我什至需要这个？)

我们正在使用 Cordova 开发一个 ios/android 应用程序，而不是担心断点和所有不同的屏幕尺寸，我们决定相当广泛地使用视口(viewport)单位，只担心一些纵横比/屏幕尺寸比例。

因此，现在，我们的样式在 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 的额外媒体查询。

Answer 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 具有相应的视口(viewport)单位值 (vh) – 但浏览器更好地支持。