logo标签列表

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

ios7media-queries
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>
3个回答
5

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

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

我无法使用orientation: landscape，因为即使在竖屏模式下键盘打开时规则也会被激活。

可能我需要为iPhone添加不同的规则，但我还没有做到这一步。

3
键盘方向错误不仅影响应用程序模式，还影响一些网页浏览器，但希望这种解决方法可以在两种情况下使用。它似乎也会影响一些安卓设备。以下是我在移动网页浏览器中解决此问题的方法：
@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修复此问题，则如果您不想更改代码，则无需更改。
如果设备真正翻转到横向模式，则纵横比仅增加，而且如果提高键盘，则会更加增加，因此当设备侧放时，该错误应该永远不会出现。
据我所知，目前没有带有正方形/几乎正方形屏幕的设备会触发此媒体查询（截至撰写本文），但如果我错了，请纠正我。
这已在iPhone 5s上的Safari、Dolphin和Mercury浏览器以及Android One X上运行Android 4.2.1的Chrome上进行了测试（这也会出现相同的键盘方向错误）。
我还检查了Blackberry Bold 9780（480x360）是否会触发，但没有。我不太相信这一点，因为分辨率应该使其落入目标范围，并且它可以正常加载其他MQs，因此也许它根据屏幕的物理尺寸而不是像素数来评估纵横比。这可能是媒体查询将您的错误解决方案应用于未经历错误的屏幕的情况。
这不是完美的，但经过很多头痛后，它让我摆脱了麻烦。
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接