Question

我有一个网站，我试图在所有设备中完美地坐着。

我正在使用媒体查询根据设备指定不同的布局。但是我的视口有问题。

我的视口标记是：

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

它非常适合iPad，但在Android平板电脑上，它似乎忽略了元视口标签。

（原谅蹩脚的照片.iPhone相机！使用同事的平板电脑，不想进入他的电子邮件发送自己的屏幕抓取）

以下是它的加载方式 - 注意它没有正确显示缩放级别。它放大得太远，有些页面在屏幕右侧： enter image description here

当我缩小缩小（尽可能允许）时，它看起来像这样 - 这是我希望它在用户缩小之前首次加载时显示的方式：

enter image description here

当我旋转设备时，它根本不会改变显示宽度，因此它以相同的缩放级别显示，但两侧都有空白区域。

有没有人有任何想法我怎么能让它表现得如此以至于我可以去周末喝酒？

Answer 1

您的页面正在被裁剪，因为浏览器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>

Answer 2

不同版本的Android处理视口的方式不同。

您使用的是哪个版本的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>

Answer 3

您是否尝试在内容中添加initial-scale=1.0？这应该有效，但如果没有，我可能会尝试在那里再抛出一些属性。您可以阅读有关所有different viewport properties here的更多信息。

Answer 4

不同的浏览器工作方式不同。我能在Nexus 7上正常工作的唯一浏览器是Dolphin，它还有其他HTML5按钮等问题。

Android平板电脑貌似无视元视口

4 个答案: