web-dev-qa-db-ja.com

AndroidでズームインChromeを無効にする方法は？

Chrome AndroidではChrome $ ===でページのズームを防止しようとしていますが、動作したくありません。以下のコードを使用しています。これはストックで正常に機能しますAndroid iOSのブラウザとSafari。何か考えはありますか？

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

    <meta name="viewport" content="width=device-width" />
androidhtmliosgoogle-chromesafari
15
dcarr622

viewportメタタグにminimum-scale=1を追加してみてください。それでも問題が解決しない場合は、ChromeのAndroidでズームの無効化がサポートされていない可能性があります。 （たとえば、HTC独自のブラウザでは、意図的にズームを無効にすることはできません）

更新：確認したところ、Chrome doesはズームの無効化をサポートしているようですが、コードに2つのビューポートタグがありますか？ 2番目のものが最初のものをオーバーライドしている可能性があります。 2番目のものを削除します。

詳細と複数のブラウザ間でズームを無効にするための適切な提案については、このリストを参照してください ズームを無効にするためのモバイルブラウザのサポート 。

16
Kelvin

私はベルトとブレースのアプローチを使用しており、 developer.Android.com 's Web Appsからのターゲット画面 に従って、使用可能なすべてのビューポート設定を構成しています。

次の構文は、サポートされているすべてのビューポートプロパティと、それぞれが受け入れる一般的なタイプの値を示しています。

<meta name="viewport"
  content="
    height = [pixel_value | device-height] ,
    width = [pixel_value | device-width ] ,
    initial-scale = float_value ,
    minimum-scale = float_value ,
    maximum-scale = float_value ,
    user-scalable = [yes | no] ,
    target-densitydpi = [dpi_value | 
     device-dpi | high-dpi | medium-dpi | low-dpi]
    " />

ズームなしの構成済みメタタグ：

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

そしてワンライナーとして：

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