使用视口单位的“比例”媒体查询答案

【问题标题】："Proportional" media queries using viewport-units使用视口单位的“比例”媒体查询
【发布时间】：2016-03-02 22:32:12
【问题描述】：

问题：

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 的额外媒体查询。

【问题讨论】：

标签： css media-queries mobile-safari viewport-units

【解决方案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)，但浏览器支持更好。

【讨论】：

【解决方案2】：

在真正支持视口单元之前，您可以使用cordova-anyscreen 来完成您想要的。 https://github.com/biodiv/cordova-anyscreen.

您还可以支持低至 4.0 的 Android，甚至可能是 2.3（这可能并不重要）和 iOS 6+。

比例布局是参考尺寸为 1080*1920 的屏幕完成的。所以如果你想要 50% 的宽度，你会使用 540px。显示由脚本测量并重新计算与屏幕匹配的 540px。

【讨论】：