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

Question

我在获取适用于Android智能手机的Viewport时遇到问题。

我的网站完全响应宽度为480像素，因此min-width标记上的body设置为480像素。

我的第一个观点是：

<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" />

希望您缺少比例参数。