iphone webappの背景がスワイプに反応しないようにします

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" /> 

私はまたtouchstart、touchmoveのイベントハンドラとして次、およびbody要素の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

私は同じ問題を抱えていましたが、一般的なケースで問題を解決することができた誰も見つけることができませんでしたが、私は解決したソリューションを思いついたと思います。

溶液（JavaScriptで）である - シンプル

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

、ありませんか？これは、 'touchmove'イベントのデフォルトの動作を防ぐことで動作し、バックグラウンドのスワイプは起こりません。シミュレートされたクリックイベントには影響しません。