iOS 10以降のSafariでビューポートのズームを無効にするには？質問する

Question

iOS 10 の Safari で Web ページのスケーリングを防ぐことは可能ですが、そのためにはユーザー側でより多くの作業が必要になります。ある程度の難しさがあれば、cargo-cult 開発者がすべてのビューポートタグに「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);

フォーム要素を正しく設定しないと、入力にフォーカスすると自動的にズームされ、手動ズームをほぼ無効にしているため、ズーム解除がほぼ不可能になります。入力フォントサイズが 16 ピクセル以上であることを確認してください。

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

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

Answer 1