web-dev-qa-db-ja.com

すべてのモバイルブラウザの完全なWebページと無効なズームビューポートメタタグ

ウェブページを全画面表示にし、すべてのモバイルデバイスでズームを無効にします。

メタタグの場合：

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

IPhone/iPadでこれを行うことはできますが、AndroidデバイスではWebサイトが約125％に拡大されています。

タグを使用する場合

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

私は反対の結果を得る。したがって、Androidで動作しますが、iPad/iPhoneでは動作しません。

androidiphoneipadviewportmeta
43
Coen Ponsen

残念ながら、各ブラウザにはビューポートメタタグの独自の実装があります。さまざまな組み合わせがさまざまなブラウザで機能します。

Android 2.2：ビューポートメタタグはまったくサポートされていないようです。

Android 2.3.x/3.x：user-scalable = noを設定することにより、スケーリングを無効にしますビューポートメタタグのご自身も同様です。これがおそらく幅オプションが効果を持たない理由です。ブラウザがコンテンツをスケーリングできるようにするには、user-scalable = yesを設定し、ズームを無効にするには、最小スケールと最大スケールを同じ値に設定して、縮小または成長します。サイトがぴったり収まるまで、最初のスケールで調整します。

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

Android 4.x：最小および最大スケールがもう守られず、user-scalable = yesユーザーはいつでもズームできます。「no」に設定すると、自分のスケールが無視されることを意味します。これは私が現在直面している問題であり、この質問に私を引き付けました... 4.xではズームとスケールを同時に無効にしているようです。

iOS/Safari（4.x/5.xテスト済み）：スケールは期待どおりに動作し、userでスケーリングを無効にできます-scalable = 0（4.xではキーワードyes/noは機能しません）。 iOS/Safariにもtarget-densitydpiの概念がないため、エラーを避けるためにそれを省く必要があります。必要な方法でズームをオフにできるため、最小値と最大値は必要ありません。 widthのみを使用するか、 iOSの向きのバグ に遭遇します

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

Chrome：スケールはiOSの場合と同じように機能し、最小値と最大値が尊重され、を使用してズームをオフに切り替えることができますuser-scalable = no。

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

結論：基本的なブラウザ/デバイスの検出後に、かなり単純なJSを使用してコンテンツを適宜設定できます。この種の検出は嫌われていることは承知していますが、この場合、各ベンダーが行って独自のことを行っているため、ほとんど避けられません！これがビューポートとの戦いに役立つことを願っています。また、ビューポートを使用せずにAndroid 4.xでズームを無効にするソリューションがある場合は、お知らせください。

[編集]

Android 4.x Chromeブラウザー（ほとんどの国にプリインストールされていると思います）：ユーザーがズームしたり、ページはフルスクリーンです。欠点：コンテンツの幅が固定されていることを確認する必要があります。以前のAndroidバージョンではこれをテストしていません。これを行うには、例を参照してください。

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

[編集2]

iOS/Safari 7.1：v7.1以降、Appleはビューポートメタタグにminimal-uiと呼ばれる新しいフラグを導入しました。フルスクリーンアプリを支援するために、これはフルスクリーンエクスペリエンスのためにアドレスバーと下部ツールバーを非表示にします（フルスクリーンAPIではなく、閉じてユーザーの承認を必要としません）。 バグの公平な共有 が付属しており、iPadでは機能しません。

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[編集3]

iOS/Safari 8ベータ4：EDIT 2で言及されているビューポートメタタグminimal-uiは、今回のAppleによって削除されました。リリース。 ソース-WebKit Notes

83
BrutalDev

[〜＃〜] html [〜＃〜]

<head>
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>

jQuery

オプション1：

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

オプション2：

var deviceSpecific = {
    iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}

矛盾が見つかった場合、オプション2は最後の手段です。

4
Alastair

単に使用します：

<meta name="HandheldFriendly" content="True" />

私のSamsung Note IIとHTC Desireでうまく機能します。

3
user1433439

Appleデバイスの場合：

<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

最初のタグは、iPhone/iPod/iPadのホーム画面に配置されたショートカットアイコンを介してWebアプリを開くと、Webアプリを全画面モードで実行します。

2番目のタグは、最初のタグと組み合わせてのみ機能します。可能な値は次のとおりです。デフォルト、黒、黒半透明。

3番目のタグは、サイトの幅を標準サイズ（1.0）にブロックし、ズームを許可しません。

注：「Apple-mobile」メタタグはApple以外のデバイスでは無視され、3番目のタグはHTML5で公式であるため、これらすべてを一緒に使用できます。

Androidについては、誰もがデフォルトのAndroid webbrowserを使用するわけではないため、グローバルソリューションはありません。 フルスクリーンAndroid用Webアプリ

ここに他の便利なリンク：

IOSのヒント： http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

すべての公式および非公式の既知のメタ： https://Gist.github.com/kevinSuttle/1997924

2
Gianpiero Caretti

Samsung Galaxy Note 4を使用しており、ブラウザーとしてchromeを使用しています。ビューポートメタタグを無視していることがわかり、HandheldFriendlyで動作するようになりました。メタタグコンボになりました。 Android and iOS。

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
2
Giacomo

Androidはバージョン4.4.2から修正しました

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

ヘッダーで次のJavascriptを使用して、メタタグを設定しました。

<script>
  if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
    document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
  } else {
    document.write("<meta name='viewport' content='width=max-device-width, user-   scalable=no'>"); // again, which ever meta tags you need
  }
</script>

追加の条件を追加し、特定のニーズに合わせて設定できます。

0
Kalimar Maia

私はこのコードを使ってiPhoneのズームを防ぎ、問題は解決しましたが、別の問題が発生しました。入力フィールドをクリックすると、ウィンドウ全体がジャンプしてからその位置が通常に設定されます。移動ボタンを押すと同じ動作が発生し、ウィンドウがジャンプします。ウィンドウだけが通常の場所にサイズを変更できるように、ジャンプを取り除く必要があります。

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
0
Saad Ahmed
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
0
Shakeel

価値があるものについては、javascript *を使用せずに、Nexus 7（Android 4.2.2）/ Chromeの横画面のみで1024px幅のコンテンツページを正確に全画面表示するために使用したものです。

width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

（user-scalable = noは実際には最小スケールと最大スケールを無効にしていると思います）。デバイスのピクセル密度などを呼び出すような計算ではなく、試行錯誤によって.94の値を取得しました。

*つまりコンテンツの幅をウィンドウに一致させるために-私はjsを使用して、ビューポートメタコンテンツを条件付きで書き込みました。

0
David Smith

私はこれに関してあらゆる種類の問題を抱えていましたが、ブラウザ検出システムを構築して、異なるブラウザに異なるビューポートタグを配信し始めました。それから私は自分がやっていることを単純化し、すべてがうまくいくようにすることにしました。ビューポートをサイトの幅に設定し、すべてが機能するようにします。

<meta name="viewport" content="width=1165 />
0
Dan B

Dan Bからの以下の提案は私にとっては非常にうまく機能しており、Androidにサイトを正しくロードしようとする際にあらゆる種類の問題が発生しており、これによりソートされています。とにかく今のところ！

<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

ありがとう！

0
user2390584