Question

问题：

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

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等效，并且在视口单元（vh）中具有相应的值 - 但浏览器会更好地支持它。

Answer 2

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

你也可以支持Android降至4.0，甚至可能支持2.3（可能不重要）和iOS 6+。

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

使用视口单元的“比例”媒体查询

2 个答案: