モバイルWebページでズームを「無効」にするにはどうすればよいですか？

316

私は、基本的にいくつかのテキスト入力を備えた大きなフォームであるモバイルWebページを作成しています。

しかし（少なくとも私のAndroid携帯電話では）、入力をクリックするたびに、ページ全体がそこでズームし、ページの残りの部分が見えなくなります。モバイルWebページでこの種のズームを無効にするHTMLまたはCSSコマンドはありますか？

html css mobile

3

グレッグが上で述べたように、ズームを無効にするモバイルWebサイトにアクセスした場合、私が通常行う最初のことは（実際に表示する必要がある場合を除いて）戻るボタンを押すことです。。さらに、私の経験から言えば、ズームが無効になっているWebサイトのほとんどは小さなフォントも使用しているため、テキストを読むのが難しく、非常に不快です。

— tomasz86 2013年

8

ほとんどのサイトでは無効にすべきではないことに同意しますが、デフォルトのズームを無効にしたい場合があるいくつかのユースケースがあります-ズームをオーバーライドして他のことをすることができるモバイルWebゲームなどです。

— ルーク

11

必要はありません —ユーザーがズームしたい場合は、ズームを許可します。さらに：Chromeには、リクエストを無視するオプションがあります。

— マーティン

2

Android Firefoxユーザー向けに、Firefox 用のAlways Zoomアドオンがあります。強くお勧めします。

— Colin D Bennett、

2

よりiOSの10、user-scalable=no無視されます。これを

— Raptor

443

これはあなたが必要とするすべてであるべきです

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

— kgutteridge
ソース

23

これにより、ユーザーの一般的なズーム機能と、ページがビューポートに収まるようにブラウザが自動調整する機能も無効になります。マーティンが求めているのは、「入力クリック時のズーム」を無効にする方法です動作。

— matt lohkamp

3

現在、Posterousの誰かがそれを行っていましたが、フォントが12pxになっているので、それは判読できず、回避策を見つけることができません。

— Emil Ivanov

41

私を含むすべての視覚障害者は、何よりもこれを嫌っています。これを行うページの画面グラブを取得して、画像ビューアでそれらを拡大する必要があります。

— Jack Marchetti、2013年

6

2番目のメタタグは何をしますか？ではないwidth=device-width最初のメタタグですでに？

— ルーク

1

これはiOS 7では機能しないようです。lukad03の回答を参照してください

— davivid '

159

パーティーに遅れる人のために、kgutteridgeの答えは私にはうまくいきません、そしてBenny Neugebauerの答えはtarget-densitydpi（非推奨となっている機能）を含みます。

しかし、これは私にとってはうまくいきます：

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

— ルーク・ケラー
ソース

7

これが正解です。他の回答は機能しなくなりました（少なくともiOS 7の場合）。

— KyleFarris 14年

7

誰もがiOS 10.xでこれを試しましたが、うまくいっていないと思いますか？

— JMac 2017

うまくいきません。スクロールバーと悪いズームですべての画面のサイズを変更しました。

— Cocorico

1

AppleのSFBの問題のため、Safari / iOS 11ではまだ機能しません。

— 15ee8f99-57ff-4f92-890c-b56153 2018年

52

ここにはいくつかのアプローチがあります。通常、ユーザー補助のためのズームに関してユーザーを制限するべきではないという立場ですが、必要な場合があります。

デバイスの幅でページをレンダリングします。スケーリングはしません。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

スケーリングを防止し、ユーザーがズームできないようにします。

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

すべてのズーム、すべてのスケーリングを削除する

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

— SW4
ソース

「通常、ユーザーは制限されるべきではありません」が、モバイル用のWebアプリを開発するときは、「入力重視のゾーン」に対処しなければならないことがよくあります。その場合はズームを無効にすると便利です。

— Le 'nton

@ Le'ntonがページ全体のズームを無効にすることは、入力フォーカスでのズームインに対処する良い方法ではありません。少なくともiOSでは、入力のフォントサイズを大きくすることで、入力フォーカスのズームを無効にできます。

— pfg

39

以下を使用できます。

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

ただし、Android 4.4では、プロパティtarget-densitydpiはサポートされなくなったことに注意してください。したがって、Android 4.4以降の場合、ベストプラクティスとして次のことをお勧めします。

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

— ベニー・ノイゲバウアー
ソース

35

最初の問題の解決策はまだないので、ここに私の純粋なCSS 2セントを示します。

モバイルブラウザー（ほとんどのブラウザー）では、入力のfont-sizeを16pxにする必要があります。そう

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

スニペットを展開

問題を解決します。したがって、サイトのズーム機能とルーズアクセシビリティ機能を無効にする必要はありません。

ベースのフォントサイズが16pxでもモバイルでも16pxでもない場合は、メディアクエリを使用できます。

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

スニペットを展開

— アザマット・ラスロフ
ソース

2

このソリューションの投票数が非常に少ないのはなぜですか？これは、フォームクリックズームを回避するための最善の方法です。

— KlausCPH

1

はい; これも私の問題を解決しました！ズームを完全に無効にしたくなかったので、これが必要なものでした。

— ブレンダン

1

font-size: 1remページ全体に設定することもできるので、フォントは適切に拡大縮小され、同時に「フォーカスオンズーム」の問題を回避できます。

— イタチ

12

このメタタグとスタイルを追加してみてください

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


<style>
body{
        touch-action: manipulation;
    }
</style>

— サラス・アク
ソース

1

べきではないtouch-actionに設定するnone- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 touch-action: manipulation;はうまくいきました。touch-action: none;何もし

— なかった

7

index.htmlにメタタグを追加するだけでは、ページのズームが妨げられないようです。以下のスタイルを追加すると魔法がかかります。

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

編集：デモ：https : //no-mobile-zoom.stackblitz.io

— API
ソース

2

これは受け入れられる修正であり、モバイルサファリios13 atmでも機能します

— Magico

モバイルで期待どおりに機能しています。ありがとうございます。ここを確認してくださいproyecto26.com/animatable-component

— jdnichollsc

6

Webアプリの考えられる解決策：iOS Safariではズームを無効にできなくなりましたが、ホーム画面のショートカットからサイトを開くとズームが無効になります。

次のメタタグを追加して、アプリを「Webアプリ対応」として宣言します。

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

ただし、この機能は、アプリが自動継続している場合にのみ使用してください。前方/後方ボタンとURLバー、および共有オプションが無効になっています。（ただし、左右にスワイプすることもできます）ただし、このアプローチではuxのようなアプリをかなり有効にできます。フルスクリーンブラウザーは、サイトがホームスクリーンから読み込まれたときにのみ起動します。~~また、ルートフォルダーにapple-touch-icon-180x180.pngを含めて初めて機能しました。~~

おまけとして、おそらくこれのバリエーションも含める必要があります。

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— デンカー
ソース

1

次の「meta」要素を「head」に追加するだけで、タスクを実行できます。

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

「width」、「initial-scale」、「maximum-width」、「maximum-scale」などのすべての属性を追加しても機能しない場合があります。したがって、上記の要素を追加するだけです。

— かすみぐなせから
ソース

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

ピンチ、タップ、フォーカスを無効にするスクリプトを追加してくださいズーム

— プレム
ソース