3

ブラウザがメタ ビューポート要素に基づいて Web サイトをスケーリングするかどうかを検出することは可能ですか?

4

2 に答える 2

1

メタ ビューポートが適用されるかどうかを検出する JavaScript メソッドはありません。ただし、次のようなアプローチを使用して、ヘッドにインライン js を使用して 2 段階のプロセスで適用されたかどうかを確認できます。

<head>
<script>
  var clientWidth = document.documentElement.clientWidth;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
  if (clientWidth !== document.documentElement.clientWidth){
  //device or browser support the meta-viewport which just changed the width
  }
</script>
</head>

これは、モバイル デバイスの初期/デフォルト ビューポートが 980px ( http://www.quirksmode.org/mobile/metaviewport/ ) であり、一般的なデスクトップ画面ではまったくないため、モバイルの最も一般的なケースでレスポンシブ デザインで機能します。 . また、現在、メタビューポートをサポートしているデスクトップ ブラウザーはありません。

その点で、このメソッドをモバイル デバイスを検出する要素として使用します。ただし、例外があることに注意してください。したがって、すべてのデバイスで上記の方法だけに頼ることはできません。

たとえば、Blackberry Playbook では、デフォルトのビューポート サイズが の 600x1024 ピクセル サイズにすでに一致しているdevice-width, initial-scale=1ため、メタ ビューポートの再スケーリングにかかわらず clientWidth は変更されません。

于 2014-05-17T07:35:17.230 に答える
0

いいえ、meta viewport 要素は、現在のページをどのように処理すべきかをモバイル ブラウザーに伝えるだけです。だから、それはあなたが何をするかによって少し異なります。

サイズ変更イベントをキャッチする場合は、JavaScript を使用して実行できます。

$(window).resize(function() {
    //resize just happened, pixels changed
});

または、さまざまな画面サイズにさまざまなスタイルを追加したいだけの場合は、次のように css ファイルでメディア クエリを使用します。

@media only screen and (min-width : 30em) {
    body{font-size: 125%;}
}

@media only screen and (min-width: 37.5em) {
    body{font-size: 163%;}
}
于 2013-06-04T14:26:57.137 に答える