android智能手机的响应式设计不适合屏幕

Question

我在android智能手机上获得Viewport时遇到了问题。

我的网站完全响应到480像素宽，因此它在body标签上有一个480像素的min-width集。

我的第一个视窗是这样的:

<meta id="myViewport" name="viewport" content="width=screen-width,  user-scalable=yes"/>

这在我测试的大多数设备上都有效，但在Android手机上，它似乎放大了，并且不会自动缩小以适应屏幕的宽度。

然后我尝试使用javascript，使onload，视口的宽度属性改为480而不是screen-width应该window.innerWidth < 480。这一半是有效的:当页面加载时，它会调整大小以适应屏幕。然而，在加载过程中，它仍然像预期的那样放大。

最后，我把它改成了…

<script>
     if (window.innerWidth < 480) {
          document.write('<meta id="myViewport" name="viewport" content="width=480,  user-scalable=yes"/>');
     }
     else {
          document.write('<meta id="myViewport" name="viewport" content="width=screen-width,  user-scalable=yes"/>');
     }
</script>

这又回到了放大。它在我用过的其他设备上也能工作。

任何想法?

Answer 1

尝试使用以下元标记

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1 initial-scale=1.0" />

希望您错过了比例参数