iOS 7输入元素移动了固定定位的元素

Question

我正在尝试重新编译一个针对iOS 7的应用程序，因为旧应用无法正常工作。其中一个问题是我在UIWebViews中使用了一些输入。例如文本输入、选择器等。

现在，当出现iOS 7闪亮白色键盘时，网页中所有底部固定元素（如确认按钮）都会向上滚动，就好像虚拟键盘的“顶部”是我UIWebView的新底部一样。这与iOS6.x有着明显不同的行为。

是否有任何神奇的技巧可以使虚拟键盘的行为像以前那样工作，而无需向webView注入JS/CSS？

- Francesco

Answer 1

这个方法解决了我的 Cordova 应用程序的问题。我不确定它是否适用于你，但以防万一。

检查你的 HTML meta 标签是否包含类似以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

将其替换为此内容：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

- Opossum

---

你尝试过在横屏模式下使用这个应用程序吗？当处于横屏模式时，“device-height”仍为1024，因此屏幕底部会超出视野范围。 - Kevin Zych

我还没有接受答案，因为它没有解决我的问题。实际上，这并没有产生任何影响。我的经验与Pawel在另一个答案中所描述的非常相似，最终我采取了两个不同样式表的快速修复方法。 - Francesco

这对我在iOS7上非常有效，非常感谢...这解决了多年的麻烦哈哈... - Ilan Kleiman

尝试了这个方法但对我没有用，唯一帮助我的事情是将固定元素更改为绝对定位，并使用滚动值更新其顶部值。 - nicolas

我的也被保存了。真是太神奇了，我从来没有使用过元标签来修复它。 - Pedro Gabriel

Answer 2

在我们的情况下，只要用户滚动一下页面，这个问题就会自动解决。因此，以下是我们一直在使用的解决方案，用于模拟在任何 input 或 textarea 上的 blur 事件时滚动页面：

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

- basarat

---

强制滚动就像这样对我起作用了。下面的视口修复程序可以工作，但也可能会导致Cordova应用程序出现问题，其中width=device-width，height=device-height可能会导致滚动问题。https://issues.apache.org/jira/browse/CB-4323 - zungaphobia

这个解决方案似乎是唯一一个不会破坏任何东西的。您还可以检查用户代理，将其限制为仅适用于移动设备。var is_mobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); - Dominique Alexandre

Answer 3

我曾遇到完全相同的问题，并在尝试了两天后放弃了。看起来： a）所有底部固定元素都向上移动，因此它们的底部偏移量是相对于键盘顶部边缘的。 c）所有顶部固定元素保持其原始位置（不像以前那样向上移动）-请注意，顶部绝对定位元素可以正常工作。

我找到的唯一解决方案是使用自定义iPad样式表，将所有固定元素替换为绝对元素，将css底部属性设置为auto，并使用top代替。

- Pawel Lipka

Answer 4

Opposum，你的解决方案对我有用，但只有当比例设置为1.0时才有效。如果我将其设置为0.9，则会像在你建议的修复之前一样。我将initial-scale、maximum-scale和minimum-scale设置为0.9，但当键盘出现时，固定对象的弹跳效果仍然存在。

- David Shears

---

玩弄元素的内容时，似乎最小比例是问题所在。当忽略它时，固定位置的问题就会出现。当将其设置为小于1.0的值时，固定位置的问题仍然存在。当将其设置为大于或等于1.0的值时，固定位置的问题得到解决。 - David Shears

这不是一个答案，只是一种观察；因此应该作为注释而不是答案。 - SikoSoft