3
  1. 将此网页添加到您的 iOS7 主屏幕
  2. 打开它，并聚焦输入字段（键盘弹出）
  3. 文字变为红色，因为手机认为它处于横向模式

有什么办法吗？还是我们应该责怪苹果？

注意：此问题仅在应用程序模式下发生，而不是在常规 Safari 浏览模式下。它在 iOS6 中运行良好。

代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<style>
body {
    color: blue;
}   
@media (orientation:landscape) {
    body {
        color: red;
    }
}
</style>

<body>
    <h3>this text will go red when in landscape</h3>
    <input type="text" />
</body>
4

3 回答 3

5

这显然是一个 iOS7 错误。在我的应用程序中，我发现即使在使用此媒体查询打开屏幕键盘的情况下专注于输入字段时，我也可以可靠地区分纵向模式和横向模式：

@media only screen and (device-width: 768px) and (device-height: 1024px) and 
    (min-aspect-ratio: 4/3) {
  /* landscape differences here */
}

我不能使用方向：横向，因为如果键盘打开，即使在纵向模式下，该规则也会被激活。

我可能需要为 iPhone 制定不同的规则，但我还没有走到那一步。

于 2013-10-25T15:52:50.473 回答
3

键盘方向错误也会影响一些网络浏览器，不仅仅是应用程序模式，但希望这可以在任何一种情况下使用。它似乎也影响了一些 Android 设备。

以下是我在移动网络浏览器中的解决方法：

@media only screen and (min-device-aspect-ratio:1/1) and 
                       (max-device-aspect-ratio:3/2)    {
 /* Landscape-to-portrait corrections here */
}

这个想法是，只有当屏幕是完美的正方形或接近正方形时才会触发此查询，这种情况几乎只在触摸屏设备上抬起键盘时才会发生。我使用的纵横比值转换为 1 到 1.5 之间，因此例如 16:9 屏幕的纵横比为 1.7777778 (16/9)，不会成为目标。MQ 触发后，您可以重新设置受影响元素的样式。这并不能修复错误，它只是隐藏它。

如果操作系统不包含该错误，则此查询将永远不会触发，因此如果 Apple 修复此问题，则无需更改代码即可。

如果设备真正翻转到横向模式，则纵横比只会增加，如果键盘被抬起，则更是如此，因此当设备侧放时，该错误永远不会出现。

据我所知，没有方形/几乎方形屏幕的设备可以接收此媒体查询（在撰写本文时），但如果我错了，请纠正我。

这已经在运行 iOS7 的 Safari、Dolphin 和 Mercury 浏览器中的 iPhone 5s 以及运行 Android 4.2.1 的 Android One X 上的 Chrome 中进行了测试（它也遇到了与键盘相同的错误定位错误）。

我还检查了它是否会在 Blackberry Bold 9780 (480x360) 上触发，但它没有。我不太相信这一点，因为分辨率应该使其落在目标范围内并且它加载了其他 MQ 就好了，所以它可能会根据屏幕的物理尺寸而不是像素数来评估纵横比. 这可能是媒体查询将您的错误解决方案应用于未遇到错误的屏幕的一个实例。

它并不完美，但它让我在很多头痛之后摆脱了麻烦。

于 2013-11-13T03:10:52.490 回答
0

innerHeight现在受 iOS7 中键盘启动的影响。如果您在设备处于纵向时使用键盘向上检查innerHeightvs innerWidth，您会发现innerHeight < innerWidth浏览器的方向检查可能就这么简单，而不是直接使用设备方向。

于 2013-10-10T20:54:58.043 回答