javascript - iOS 7 Mobile Safari 键盘上下滚动事件的问题

Question

我正在测试一些滚动事件并注意到在 iOS 7 Mobile Safari 中键盘弹起时会触发滚动事件，但在键盘关闭/按下时不会触发。我想知道是否有人知道这是为什么？

我个人认为这是一个错误(我正在尝试报告它，但目前无法登录错误跟踪器)，他们应该选择在键盘上下滚动事件，或者选择根本不要扔掉它们，因为 View 似乎返回到以前的状态。

为了演示这个问题，我创建了这个小网站，您可以在其中单击输入框并看到滚动事件在键盘弹起时触发，但在键盘菜单上按下完成并且屏幕滚动到它时不会触发初始位置。我添加了一个可扫描的二维码，将您发送到下面的测试网址。提前致谢!

测试网址:http://lp.mydas.mobi/test/cs/scroll_issue/error.html

测试二维码:

Answer 1

前几天在 Phonegap 应用程序中遇到了这个问题，但该行为似乎也与新的 Safari 一致。

据我所知，新的 Safari 会在键盘启动时调整报告给网页的视口(viewport)大小。我有一个高度为 100% 的页面和一个绝对位于页面底部的导航。当键盘出现时，导航也随之出现。恼人的是，这导致我的 2 个输入字段失去焦点，隐藏它们并无法完成登录!

以前，我避免在视口(viewport)元标记中使用 height=device-height，因为旧版 Safari 似乎对状态栏一无所知，而且报告的设备高度也始终为 20 像素高，导致滚动 20 像素以查看页面的最底部。

我最终使用的修复方法是设置 height=device-height 并且 iOS7 没有任何视口(viewport)调整大小/导航重叠的问题。令我惊讶的是，页面在所有情况下都保持设备高度的 100%。

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

为了让这种固定高度的情况与 iOS5 和 6 一致地工作，我做了一些设备检测并手动计算了设备高度 - 20 像素，并重置了视口(viewport)标签。

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5 && ver[0] <= 6) {
  $('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}

我觉得这个解决方案有点不对劲，但进退两难(新 Safari)和进退两难(旧 Safari)，这就是我的答案。

如果您找到更好的方法，请告诉我!祝你好运:)