1

我正在制作我的网站的移动版本，并试图让它在 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;
}

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

任何帮助深表感谢。谢谢！

4

1 回答 1

4

我遇到了同样的问题，但是在 iPad 上，在一般情况下找不到能够解决问题的人，但我相信我已经想出了一个可行的解决方案。

解决方案是（在 Javascript 中）——

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

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

于 2010-05-26T02:23:08.477 回答