web-dev-qa-db-ja.com

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'の値がどれも機能していないようです。

私はセミコロンの代わりにカンマで値を区切ってみました。それから私はユーザースケーラブルな値が存在することだけを試してみました、まだ運がありません。

_アップデート_

Appleのサイトからこれを手に入れて、それはうまくいく：

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

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

htmliosmobile-safarizoomviewport
339
MetaGuru

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

これはiOS 4.2のMobile Safariで私のために働きます。

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

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

リリースノートから ：

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

私が理解している限りでは、私たちは運が悪いです。

141
Mattis

iOS 10 Safariでは、ユーザースケーラブル属性を使用してピンチズームを無効にすることはできません。しかし、 'gesturestart'イベントでpreventDefaultを使用できないようにしました。私はiOS 10.0.2のSafariでこれを検証しました。

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

iOS 10の「ビューポート」までのiPhoneサファリの場合は解決策ではありません

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);
15
Arthur
user-scalable=0

これはもはやiOS 10では動作しません。Appleはこの機能を削除しました。

あなたがグロスプラットフォームのアプリを作らない限り、あなたは今iOS上のズームWebサイトを無効にすることはできません。

9
angry kiwi

あなたのhead-tagに以下を追加してみてください。

<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">

最後に、style-attributeとして、またはcssファイルに、Webキットベースのブラウザ用に次のテキストを追加します。

html {
    -webkit-text-size-adjust: none
}
9
Lorenz Lo Sauer

ときには、コンテンツ内のこれらの他のディレクティブが、ページのレイアウト方法についてのAppleの最善の推測でビューを乱す可能性があります。ピンチズームを無効にするために必要なのは、

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

これはIOS 10.3.2では問題なく動作します。

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

ありがとう@arthurと@aleclarson

4
Nikhil Gowda

Safari 9.0以降では、以下のようにviewportメタタグで 縮小してフィット を使用できます。

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

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;
}
1
imelgrat

次のコードを使用して、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に設定されていることに注意してください。

1
José Antonio Postigo

私は愚かにラッパーdivを持っていた幅はピクセル単位で測定しました。他のブラウザはこれに対処するのに十分知的であるように見えました。幅をパーセント値に変換すると、Safariモバイルでもうまく機能しました。とてもうるさい。

.page{width: 960px;}

に

.page{width:93.75%}

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

WAI WCAG 2.0 AAのアクセシビリティ要件に準拠するためには、 絶対に無効にしないでください ピンチズーム。 （WCAG 2.0：SC 1.4.4テキストのサイズ変更レベルAA）。あなたはここでそれについてもっと読むことができます： モバイルアクセシビリティ：WCAG 2.0と他のW3C/WAIガイドラインがモバイルに適用する方法、2.2ズーム/倍率

0
haltersweb