Question

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

周围有什么办法吗？或者我们应该责怪苹果？

注意：此问题仅发生在应用模式，而不是常规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>

Answer 1

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

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

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

我可能需要一个不同的iPhone规则，但我还没有那么远。

Answer 2

键盘方向错误也会影响某些Web浏览器，而不仅仅是app模式，但希望这可以在任何一个实例中使用。它似乎也影响了一些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，所以它可能会根据屏幕的物理尺寸而不是像素数来评估宽高比。这可能是媒体查询将您的错误解决方案应用于未遇到错误的屏幕的实例。

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

Answer 3

innerHeight现在受到iOS7中键盘启动的影响。如果您在设备处于纵向状态时使用键盘向上检查innerHeight vs innerWidth，您会发现innerHeight < innerWidth因此浏览器的方向检查可能就像那样简单而不是使用设备方向直线上升。

键盘方向和媒体查询错误（应用程序模式）

3 个答案: