4

我正在测试一些滚动事件,并注意到在 iOS 7 Mobile Safari 中在键盘向上时触发了滚动事件,但在键盘关闭/向下时没有触发。我想知道是否有人知道这是为什么?

我个人认为这是一个错误(并且正在尝试报告它,但目前无法登录错误跟踪器),他们应该选择在键盘上上下滚动事件,或者选择不抛出它们完全没有,因为视图似乎恢复到以前的状态。

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

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

测试qr:二维码

4

2 回答 2

7

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

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

以前,我避免在视口元标记中使用height=device-height因为 OLD Safari 似乎对状态栏一无所知,并且报告的 device-height 总是 20px 太高,导致 20px 滚动查看非常页面底部。

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

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

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

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)之间,这就是我的答案。

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

于 2013-10-15T20:49:38.430 回答
1

你用的是phonegap还是什么?如果您将 phonegap 与 iscoll.js 一起使用,那么您只需要在设备中触发键盘事件时刷新滚动条。

这是键盘事件的链接: 键盘事件

在关闭键盘上,您只需要调用此代码:

window.scrollTo(0, 0);
于 2013-10-11T14:12:56.540 回答