为什么 CSS min-width 会导致我的响应式网站在移动设备上被放大？

Question

我正在构建一个响应式网站，但遇到了问题，这意味着当我在移动设备上查看它时，它会自动放大一小部分。我可以缩小以查看页面的整个宽度，但是当我单击指向另一个页面的链接时，新页面加载时也会略微放大（可能放大 10% 左右）。

我已经设置了一个合适的视口来处理这个问题：

<meta name="viewport" content="width=device-width, initial-scale=1" />

我还在 body 上设置了一个最小宽度，这是必要的，因为低于这个宽度，网站布局会中断：

body {
    min-width: 400px;
}

如果没有最小宽度，该网站在移动设备上运行良好，但使用最小宽度，页面加载会稍微放大。我已经在 Chrome 和 Android 上的股票浏览器（在 Galaxy S3 和 Galaxy Nexus）具有相同的结果，所以我似乎误解了一些东西而不是发现了一个错误。

最终，我希望网站完全缩小（初始比例 = 1）并将最小显示宽度设置为 400 像素，因此我无需担心宽度更窄的布局。这甚至可以实现吗？

Answer 1

好的，我已设法找到解决此问题的适当方法。问题是我将视口设置为设备宽度，这通常似乎是一件好事。

当设备宽度低于为我的站点设置的最小宽度（本例中为 400 像素）时，就会出现问题。因此，例如，如果设备宽度为 320 像素，则视口设​​置为该宽度，导致网页对于移动屏幕来说太大了大约 80 像素。

解决方案是在窗口宽度小于或等于 400 像素的情况下，使用一些 JavaScript 将视口宽度从设备宽度更改为 400。这段代码解决了这个问题：

<meta id="myViewport" name="viewport" content="width=device-width" />
    <script>
        window.onload = function () {
            if(window.innerWidth <= 400) {
                var mvp = document.getElementById('myViewport');
                mvp.setAttribute('content','width=400');
            }
        }
     </script>

Answer 2

您可以使用它来防止缩放。

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

但我不认为保留是个好主意

body
{
   min-width: 400px;
}

因为内容会在较小的视口中溢出。您的缩放问题可能来自

body
{
   min-width: 400px;
   overflow: hidden;
}

所以看起来像是放大了。