ピンチイン・ピンチアウトによるブラウザのズームを無効にする

JavaScriptを使って、スマートデバイスのブラウザでピンチイン・ピンチアウトを使ったズームを無効にする方法です。
2022.02.01時点で、次の内容でズームが無効になることを確認しています。

  • Windows10 - タッチパネルでのChrome
  • iOS15 - Chrome, Safari

body.addEventListener()touchmoveイベントを受信し、2つ以上のタッチがあれば処理を無効にします。

document.body.addEventListener('touchmove', (e) => {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, {passive: false});
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です