web-dev-qa-db-ja.com

Javascript-ピンチズーム、マルチタッチ入力攻撃を止める方法は？

現在のGoogle chrome安定したバージョンでは、ピンチズームを手動でブロックすることがなくなりました。これは、次の設定の古いバージョンで可能でした：

chrome://flags/#enable-pinch

キオスクでランダムなピンチズーム/マルチタッチ入力から攻撃を受けています。

JavaScriptにピンチズーム/マルチタッチを無効にするように指示する方法（キオスクを保護するため）

私は以下を試しましたが、キオスクがピンチズーム攻撃を無視することを妨げるものは何もありません。

$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});

編集：

chrome://flags/#enable-pinch-Google Chromeではもう機能しません。グーグルはそれを削除してはならず、コミュニティはそれを削除しないように抗議すべきだった。

javascriptjquerywindowsgoogle-chromechromium
15
user285594

このメタタグを_<head>_に追加することで、ユーザーがズームインできないようにする必要があります：

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

私のバージョンのGoogle Chrome Version 51.0.2704.84 (64-bit)、は、開発者ツールでタッチエミュレーションを使用してテストするときに、この設定を尊重します。

例えば：

  1. ピンチでズームできるisWebサイト： Hacker News

_<meta name="viewport" content="width=device-width, initial-scale=1.0">_

  1. ピンチでズームできないWebサイト： Designer News

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

ユーザーがズームインおよびズームアウトできるようにすることは「攻撃」と見なすべきではないことをコメントしておきます。ズームインは視力の悪い人にとって非常に重要です（または視覚障害のある人にとっては、正確で丁寧な英語の用語が何であるかわかりません）。

自然なズーム動作を無効にする場合、Webページの読みやすさについて完全な責任を負う必要があります。

6
user3297291

これが完全な回答としてカウントされるかどうかはわかりませんが、コメントする担当者がいません。 1つのオプションは、タッチイベントwindow.addEventListener("touchstart", touchHandler, false);のハンドラーを設定してから、touchHandler関数を記述することです。

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

タッチイベントを使用した開発に関する詳細情報を次に示します https://mobiforge.com/design-development/html5-mobile-web-touch-events 別のタッチイベントのハンドラーを設定する必要がありますブラウザに応じたデフォルトのピンチズーム動作を防止します。リストはここにあります： http://www.quirksmode.org/mobile/default.html

これでうまくいくかどうかはわかりませんが、試してみる価値があるかもしれません。

25
zevnicsca

PCでキオスクを実行している場合、Webアプリケーションからプログラムでこれを実行する方法はありません。

タッチデバイスドライバーの設定またはオペレーティングシステムの設定で、マルチタッチジェスチャーサポートを無効にする必要があります。ここに良い例があります- Windows 7のタッチスクリーン-マルチタッチジェスチャーを無効にできない

5
Roman Pletnev

これは、Chromeでのズームを防ぐ方法です。

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

たぶんいくつかの要素を除いて

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);
3
Fanky

touchstartの代わりにtouchmoveを使用することを除いて、ファンキーの答えは私（キオスクモードのオペラ）で機能します。スライダーを機能させ続けるには、ファンキーが示すように、特定のリスナーを追加します。

1
MR_1204

こんにちはここで私の提案です。複数の入力がある場合に意味を理解して、例1の指を（10,20）に、指2を（20,10）に平均化して、（15、 15）申し訳ありませんが、アイデアを提案することはできましたが、コードに感謝することはできませんでした

1
Kai Hayati