Mobile Safariでビューポートのズームを無効にするにはどうすればよいですか？

私はこれら3つすべてを役に立たないように試みました：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

それぞれがGoogle検索またはSO検索で推奨されている異なる値ですが、「user-scalable = X」値のいずれも機能していないようです

セミコロンの代わりに値をコンマで区切って試しましたが、うまくいきませんでした。それから私はuser-scalable価値があることだけを試しましたが、まだ運がありません。

更新

これをAppleのサイトから入手して動作します。

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

私はそれらを使用しているウェブサイトからメタタグをコピーしたので、問題は非標準的な引用であることがわかりました、おっと

コードは、属性の二重引用符を派手な二重引用符として表示しています。派手な引用が実際のソースコードに存在する場合、それが問題であると思います。

これは、iOS 4.2のMobile Safariで動作します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

iOS 10ソリューションを探している人々にとって、user-scaleable=noSafari for iOS 10 では無効になっています。理由は、Appleが人々がWebページをズームできるようにすることでアクセシビリティを改善しようとしているためです。

リリースノートから：

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

だから私が理解している限り、私たちは運が悪い。

@mattisは正しいです。iOS10 Safariでは、ピンチを無効にしてユーザースケーラブルな属性でズームすることはできません。ただし、「gesturestart」イベントでpreventDefaultの使用を無効にするようにしました。これはiOS 10.0.2のSafariでのみ確認しました。

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

iOS 10までのiphoneのサファリ「ビューポート」は解決策ではありません。この方法は好きではありませんが、このjavascriptコードを使用したため、役に立ちました。

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

user-scalable=0

これはiOS 10では機能しなくなりました。Appleはこの機能を削除しました。

グロスプラットフォームアプリを作成しない限り、iOSでズームWebサイトを無効にできる方法はありません。

ヘッドタグに以下を追加してみてください：

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

さらに

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

最後に、スタイル属性として、またはcssファイルに、Webkitベースのブラウザ用に次のテキストを追加します。

html {
    -webkit-text-size-adjust: none
}

私はそれをiOS 12で次のコードで動作させました：

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

最初のifステートメントで、iOS環境でのみ実行されることを確認します（Androidで実行すると、スクロール動作が壊れます）。また、passiveオプションがに設定されていることに注意してくださいfalse。

これはIOS 10.3.2で正常に動作します

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

@arthurと@aleclarsonに感謝

次のコードをHTMLヘッダーに追加することで、この動作を止めることができました。デスクトップブラウザはマウスホイールの使用時にズームをサポートするため、これはモバイルデバイスで機能します。これはデスクトップブラウザでは大した問題ではありませんが、これを考慮することが重要です。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

CSSスタイルシートへの次のルール

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

contentタグ内の他のディレクティブが、ページのレイアウト方法に関するAppleの最良の推測/発見的方法を台無しにする場合があります。ピンチズームを無効にするために必要なのは、すべてです。

<meta name="viewport" content="user-scalable=no" />

Safari 9.0以降では、以下に示すように、ビューポートメタタグで縮小に合わせることができます

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

ばかばかしいことに、ピクセル単位の幅のラッパーdivがありました。他のブラウザはこれを処理するのに十分にインテリジェントであるように見えました。幅をパーセント値に変換すると、Safariモバイルでも問題なく機能しました。とてもうるさい。

.page{width: 960px;}

に

.page{width:93.75%}

<div id="divPage" class="page">
</div>

CSS touch-actionプロパティの使用は、最もエレガントなソリューションです。iOS 13.5でテスト済み。

ピンチズームジェスチャーを無効にし、ダブルタップしてズームするには：

body {
  touch-action: pan-x pan-y;
}

アプリでもパン、つまりスクロールが必要ない場合は、次のようにします。

body {
  touch-action: none;
}

WAI WCAG 2.0 AAアクセシビリティ要件に準拠するために、ピンチズームを無効にすることはできません。（WCAG 2.0：SC 1.4.4テキストレベルAAのサイズ変更）。詳細については、こちらをご覧ください。 モバイルアクセシビリティ：WCAG 2.0およびその他のW3C / WAIガイドラインをモバイルに適用する方法、2.2ズーム/拡大

これはiphoneなどで動作するはずです。

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">