1

问题：

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

4

2 回答 2

3

似乎现在媒体查询支持纵横比，因为我刚刚在当前版本的 Firefox、Chrome 和 Safari 中进行了测试（参见演示）。

 @media screen and (max-aspect-ratio: 1/1) {
     .landscape { display: none; }
 }

请注意，您必须以除法的形式指定比率（例如 16/9）。不支持浮点值（例如 1.7777）。

当然，在媒体查询中，min-aspect-ratio它在功能上等同max-width于视口单位 ( ) 中的相应值vh——但更好地被浏览器支持。

于 2016-08-24T08:47:46.450 回答
0

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

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

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

于 2016-03-04T09:13:57.007 回答