ビューポートズームiOS 10以降のサファリを無効にしますか？

私は私のiPhone 6を更新プラスiOSの10のベータ版にだけモバイルサファリでは、あなたがダブルタップで任意のウェブページをズームしたりピンチができることを発見したIGNOREuser-scalable=noメタタグ内のコードを。バグなのか機能なのかわかりません。機能と見なされる場合、ビューポートズームiOS 10サファリを無効にするにはどうすればよいですか？

iOS 11/12リリースで更新されましたが、iOS 11およびiOS 12のサファリはメタタグを尊重しませんuser-scalable=no。

iOS 10のSafariでWebページのスケーリングを防止することは可能ですが、ユーザー側でさらに作業が必要になります。ある程度の困難は、カーゴカルトの開発者が「user-scalable = no」をすべてのビューポートタグにドロップして、視覚障害のあるユーザーにとって不必要に困難になることを阻止するべきだという議論だと思います。

それでも、Appleが実装を変更して、ダブルタップによるズームを無効にする簡単な（メタタグ）方法があるようにしてほしいと思います。困難のほとんどは、その相互作用に関連しています。

次のような方法でピンチズームを停止できます。

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

より深いターゲットがイベントでstopPropagationを呼び出す場合、イベントはドキュメントに到達せず、スケーリング動作はこのリスナーによって妨げられないことに注意してください。

ダブルタップしてズームを無効にする方法も同様です。前のタップから300ミリ秒以内に発生したドキュメントのタップを無効にします。

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

フォーム要素を正しく設定しないと、入力に焦点を合わせると自動ズームが行われ、手動ズームをほとんど無効にしているため、ズームを解除することはほとんど不可能になります。入力フォントサイズが16px以上であることを確認してください。

これをネイティブアプリのWKWebViewで解決しようとしている場合、上記の解決策は実行可能ですが、これはより良い解決策です：https : //stackoverflow.com/a/31943976/661418。また、他の回答で述べたように、iOS 10ベータ6では、Appleがメタタグを尊重するフラグを提供しています。

2017年5月更新：ピンチズームを無効にする古い「タッチスタートでタッチの長さをチェックする」メソッドを、よりシンプルな「タッチムーブでイベントをチェックする」チェックアプローチに置き換えました。誰にとってもより信頼できるはずです。

これはiOS 10の新機能です。

iOS 10ベータ1リリースノートから：

• SafariのWebサイトでのアクセシビリティを向上させるために、ユーザーはWebサイトuser-scalable=noがビューポートに設定されている場合でもピンチしてズームできるようになりました。

これを何らかの方法で無効にするJSアドオンがまもなく表示されることを期待しています。

touch-action個々の要素のcssプロパティを使用してこれを修正することができました。touch-action: manipulation;リンクやボタンなど、一般的にクリックされる要素を設定してみてください。

この動作はおそらく最新のベータ版で変更されているようです。執筆時点ではベータ版6です。

iOS 10 Beta 6のリリースノートから：

WKWebViewデフォルトuser-scalable=noはビューポートからの尊重になりました。のクライアントはWKWebView、WKWebViewConfiguration プロパティignoresViewportScaleLimitsをに設定することにより、アクセシビリティを向上させ、ユーザーがすべてのページをピンチズームできるようにすることができますYES。

ただし、私の（非常に限られた）テストでは、これが事実であることをまだ確認できません。

編集：確認済み、user-scalable=noデフォルトではiOS 10 Beta 6が尊重されています。

現時点でMobile Safariで機能する回避策は、3番目の引数をaddEventListenerbe { passive: false }にすることです。そのため、完全な回避策は次のようになります。

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

下位互換性を維持するためにオプションがサポートされているかどうかを確認することをお勧めします。

より堅牢なJavaScriptオプションを探すのに約1時間費やしましたが、見つかりませんでした。たまたまここ数日でhammer.jsをいじっています（Hammer.jsはあらゆる種類のタッチイベントを簡単に操作できるライブラリです）を、ほとんどの場合私がやろうとしていたことで失敗しています。

この警告と、私がJavaScriptの専門家ではないことを理解していると、これは基本的にhammer.jsを利用してピンチズームとダブルタップイベントをキャプチャし、ログに記録して破棄するソリューションです。

ページにhammer.jsが含まれていることを確認してから、このjavascriptを頭のどこかに貼り付けてみてください。

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

ピンチツーズームについての以前の答えを試しました

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

ただし、event.touches.length> 1の場合でも画面がズームする ことがあります。画面上で指が動かないようにするために、touchmoveイベントを使用するのが最善の方法であることがわかりました。コードは次のようになります。

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

お役に立てば幸いです。

touchoveイベントでスケール係数を確認し、タッチイベントを防止します。

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

1つのスタイルルールを挿入し、ズームイベントをインターセプトすることで、必要なすべてを取得できます。

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

pinピンチズームを無効にします。

doubleダブルタップズームを無効にします。

✔スクロールは影響を受けません。

tapタップによるハイライトを無効にします（iOSでは、スタイルルールによってトリガーされます）。

注意：iOS検出を好みに合わせて調整してください。詳細はこちら。

lukejacksonとPiotr Kowalskiに謝罪します。これらの回答は、上記のコードで変更された形式で表示されます。

私はかなり素朴な解決策を思いつきましたが、それはうまくいくようです。私の目標は、偶発的なダブルタップがズームインとして解釈されるのを防ぎながら、ピンチ操作でズームしてアクセシビリティを維持することでした。

アイデアは、ダブルタップで最初touchstartと2番目の間の時間を測定し、遅延が小さすぎる場合はtouchend最後のtouchendクリックをクリックとして解釈することです。この方法は、偶発的なズームを防ぎながら、リストのスクロールに影響を与えないように見えるので便利です。私は何も見逃していないかどうかわからない。

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

mutewinterの要旨とJosephの回答に触発されました。

私の特定のケースでは、Babylon.jsを使用して3Dシーンを作成しており、ページ全体が1つのフルスクリーンキャンバスで構成されています。3Dエンジンには独自のズーム機能がありますが、iOSではピンチツーズームがそれを妨害します。私の問題を克服するために@Josephの回答を更新しました。これを無効にするには、オプションとして{passive：false}をイベントリスナーに渡す必要があることがわかりました。次のコードは私のために働きます：

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

奇妙に聞こえるかもしれませんが、少なくともiOS 10.2のSafariでは、要素またはその祖先に次のいずれかが含まれている場合、ダブルタップによるズームは魔法のように無効になります。

1. onClickリスナー-単純なnoopの場合もあります。
2. cursor: pointerCSS のセット

次の場合、意図しないズームが発生する傾向があります。

• ユーザーがインターフェースのコンポーネントをダブルタップする
• ユーザーが2つ以上の数字（ピンチ）を使用してビューポートを操作する

ダブルタップ動作を防ぐために、2つの非常に簡単な回避策を見つけました。

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

これらは両方とも、Safari（iOS 10.3.2）がボタンにズームインするのを防ぎます。ご覧のとおり、1つはJavaScriptのみで、もう1つはCSSのみです。適切に使用してください。

ここにデモがあります：https : //codepen.io/lukejacksonn/pen/QMELXQ

私はピンチ動作を（まだ）防止しようとしませんでした。これは、主にWebのマルチタッチインターフェイスを作成する傾向がないためです。次に、ネイティブアプリのUIを含むすべてのインターフェイスを「ピンチズーム」する必要があると考えました。 -場所でできます。ユーザーが UIにアクセスできるようにするために、ユーザーがこれを実行しなくても済むように設計します。

ダブルクリックでズームできないように見える、この簡単な回避策が見つかりました：

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

リクエストに応じて、コメントを回答に転送しましたので、人々はそれを賛成できます：

これは、iOS 13の90％の時間で機能します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

そして

<meta name="HandheldFriendly" content="true">

上記のすべての回答をiOS（iPhone 6、iOS 10.0.2）の私のページで実際に確認しましたが、成功しませんでした。これは私の実用的な解決策です：

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

これは私のために働きました：

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);