44

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 では動作しません。

4

12 に答える 12

84

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

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 : 2.3.x と同じルールが適用されますが、最小スケールと最大スケールが適用されなくなり、user-scalable=yesを使用する場合、ユーザーは常にズームできます。「no」に設定すると、独自のスケールが無視されます。これは私が今直面している問題であり、私をこの質問に引き寄せました... 4.x でズームとスケールを同時に無効にすることはできないようです。

iOS/Safari (4.x/5.x テスト済み) : スケールは期待どおりに機能します。user-scalable=0でスケーリングを無効にできます(キーワード yes/no は 4.x では機能しません)。iOS/Safari にもtarget-densitydpiの概念がないため、エラーを避けるためにそれを除外する必要があります。期待どおりの方法でズームをオフにできるため、最小値と最大値は必要ありません。幅のみを使用しないと、 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 Beta 4 : EDIT 2 に記載されているビューポート メタ タグminimal-uiは、このリリースで Apple によって削除されました。ソース - WebKit ノート

于 2012-09-04T19:50:29.163 に答える
4

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 は、矛盾を見つけた場合の最後の手段です。

于 2012-07-05T14:37:17.610 に答える
2

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 番目のタグは、最初のタグと組み合わせてのみ機能します。可能な値は次のとおりです: default、black、および black-translucent。

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

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

Androidの場合、誰もがデフォルトの Android Web ブラウザーを使用しているわけではないため、グローバルなソリューションはありません。Android 用フルスクリーン Web アプリを見る

その他の便利なリンクを次に示します。

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

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

于 2013-06-08T22:14:24.130 に答える
2

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" />
于 2014-08-15T08:41:43.717 に答える
2

私は Samsung Galaxy Note 4 を持っていて、ブラウザとしてクロムを使用しています。ビューポートのメタ タグを無視していることがわかったので、HandheldFriendly で動作するようにしました。最終的にメタタグの組み合わせになりました。Android と iOS で動作します。

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
于 2014-12-31T15:37:13.207 に答える
0 
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
于 2014-05-22T01:54:49.497 に答える
0

価値があるのは、これが私がNexus 7（Android 4.2.2）/ Chromeで1024px幅のコンテンツページを正確に全画面表示するために使用したもので、javascriptに頼らずに横向きのみです*：

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

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

*つまり、ウィンドウに一致するようにコンテンツの幅を強制する - ビューポートのメタコンテンツを条件付きで書き込むために js を使用しました。

于 2013-07-23T17:39:13.677 に答える
0

Dan B からの以下の提案は私にとって非常にうまくいきました。私は自分のサイトを Android に正しくロードしようとしてあらゆる種類の問題を抱えていましたが、これで解決されました。とにかくとりあえず！

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

ありがとう！

于 2014-06-11T08:03:09.523 に答える
0

ヘッダーで次の 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>

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

于 2014-06-05T18:33:47.343 に答える