4

私はすべてのデバイスで完璧に座ろうとしているサイトを持っています。

メディアクエリを使用して、デバイスに基づいて異なるレイアウトを指定しています。ただし、ビューポートに問題があります。

私のビューポートタグは次のとおりです。

<meta name="viewport" content="width=device-width">

iPadには完全に収まりますが、Androidタブレットでは、メタビューポートタグを無視しているようです。

（くだらない写真を失礼します。iPhoneカメラ！同僚のタブレットを使用していて、自分自身に画面グラブを送信するために彼の電子メールに入りたくありませんでした）

ロード方法は次のとおりです。ズームレベルが正しく表示されないことに注意してください。ズームインしすぎて、ページの一部が画面の右側から外れています。 ここに画像の説明を入力してください

ズームアウトをピンチアウトすると（可能な限り）、次のように表示されます-これは、ユーザーがズームアウトする前の最初のロード時に表示される方法です。

ここに画像の説明を入力してください

デバイスを回転させても、表示幅はまったく変わらないため、同じズームレベルで表示されますが、両側に空白があります。

週末に行ってアルコールを飲むことができるように、どうすればそれを動作させることができるかについて誰かが何か考えを持っていますか？

4

4 に答える 4

4

ブラウザのcssピクセルのサイズがデバイスの物理ピクセルのサイズよりも大きいため、ページがトリミングされています。

問題の修正として、このJavaScriptをヘッダーに配置してみてください。

<script type="text/javascript">

    var scale = 1 / window.devicePixelRatio;

    var viewportTag = "<meta id=\"meta1\" name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";        

    document.write(viewportTag);        

</script>
于 2013-03-09T06:44:37.980 に答える
1

Androidのバージョンが異なれば、ビューポートの処理も異なります。

使用しているAndroidのバージョンは何ですか？

これはそれを修正するための私の不完全なjavascriptハックです：

<head>
  <!-- other stuff in the head tag goes here -->
  <script type="text/javascript">
    function viewport_to_device_width() {
      // omit viewport meta tag (to force setting initial scale to full extent) by returning false
      var b = true;
      if (window.navigator.userAgent.match(/android 2.2/i) || window.navigator.userAgent.match(/android 2.3/i) || window.navigator.userAgent.match(/android 4.0/i)) {
        b = false;
      } else if (window.navigator.userAgent.match(/android/i) && window.navigator.userAgent.match(/Linux armv7l/i) && window.navigator.userAgent.match(/fennec/i)) {
        b = false;
      }
      return b;
    }
    if (viewport_to_device_width()) {
      // omit viewport meta tag for Android 2.2 and Android 4.0 to force setting initial scale to full extent
      document.write('<meta name="viewport" content="width=device-width">');
    }
  </script>
  <noscript>
    <meta name="viewport" content="width=device-width">
  </noscript>
</head>
于 2013-03-08T17:07:20.403 に答える
0

initial-scale=1.0コンテンツに追加してみましたか? それはうまくいくはずですが、うまくいかない場合は、そこにさらにいくつかのプロパティを投げてみてください. さまざまなビューポート プロパティの詳細については、こちらを参照してください。

于 2013-03-08T16:38:24.640 に答える
-1

ブラウザが異なれば、動作も異なります。Nexus 7 で適切に動作する唯一のブラウザは Dolphin ですが、これには HTML5 ボタンなどに別の問題があります。

于 2013-03-09T15:03:24.063 に答える