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 以不同的方式处理视口。

你用的是什么版本的安卓？

这是我的蹩脚的javascript hack来修复它：

<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 回答