web-dev-qa-db-ja.com

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

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

しかし（少なくとも私のAndroid携帯電話では）、私がいくつかの入力をクリックするたびに、ページ全体がそこにズームして、ページの残りを覆い隠します。移動可能なWebページでこの種のズームを無効にするためのHTMLまたはCSSコマンドはありますか？

htmlcssmobile
287
Martín Fixman

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

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

パーティーに遅れた方のために、kgutteridgeの答えは私のために働かないし、Benny Neugebauerの答えはtarget-densitydpi（ 廃止予定の機能 ）を含みます。

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

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

ここにはいくつかのアプローチがありますが、その位置は通常ユーザーは制限されるべきではないアクセシビリティを目的としたズーミングに関しては、必要な場所で発生する可能性があります。

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

<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" />
48
SW4

あなたが使用することができます：

<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" />
39
Benny Neugebauer

最初の問題に対する解決策はまだないので、これが私の純粋なCSS 2セントです。

モバイルブラウザ（ほとんどの場合）では、入力のフォントサイズを16ピクセルにする必要があります。そう

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;
  }
}
16
Azamat Rasulov

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

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


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

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' />

ただし、onlyこの機能は、アプリが自己維持型の場合に使用します。進む/戻るボタンとURLバー、および共有オプションが無効になります。 （ただし、左右にスワイプすることはできます）ただし、このアプローチでは、uxのようなアプリを使用できます。フルスクリーンブラウザは、ホームスクリーンからサイトが読み込まれたときにのみ起動します。また、Apple-touch-icon-180x180.pngをルートフォルダーに含めた後にのみ動作するようになりました。

ボーナスとして、おそらくこのバリエーションも含めることをお勧めします。

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

あなたは単にあなたの 'head'に以下の 'meta'要素を追加することによってタスクを達成することができます：

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

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

1
Kasumi Gunasekara