Question

我正在制作我的网站的移动版本，并试图让它在iphone上尽可能地感觉自然。但是，页面的任何背景区域都会响应滑动手势，以便您可以将页面从屏幕中间移开。具体地，例如，如果用户触摸并向左滑动，则内容移出屏幕的边缘，并且可以看到页面“后面”的灰色背景。如何防止这种情况？我希望页面本身为320x480，禁用滚动扫描（除了我选择的列表元素）。

我在页面顶部添加了以下元标记：

<meta name="viewport" content="width=320; height=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

我还尝试了以下内容作为body元素的touchstart，touchmove和touchend事件的事件处理程序：

function cancelTouchEvent(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
  if (e.preventDefault) e.preventDefault();
  return false;
}

它不会停止滑动行为，但会阻止点击页面上的所有链接...

非常感谢任何帮助。谢谢！

Answer 1

我遇到了同样的问题，但在iPad上，找不到一般能够解决问题的人，但我相信我已经提出了一个有效的解决方案。

解决方案是（在Javascript中） -

document.addEventListener('touchmove', function(e) {
    if (e.preventDefault) { e.preventDefault(); }});

简单，不是吗？它的工作原理是阻止“touchmove”事件的默认行为，因此不会发生背景滑动。它不会影响模拟的点击事件。

阻止iphone webapp的背景响应滑动

1 个答案: