为什么CSS min width会导致我的响应站点在手机上放大？

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

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

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

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

如果没有最小宽度，该站点在移动设备上运行良好，但是使用最小宽度，页面加载稍微放大。我在Chrome和Android上的股票浏览器（Galaxy S3和Galaxy Nexus）上试过，结果都是一样的，所以我似乎误解了什么，而不是发现了一个bug

---

最终，我希望站点完全缩小（初始比例=1），最小显示宽度设置为400px，这样我就不必担心宽度更窄的布局。这甚至可以实现吗？

您可以使用它来防止缩放

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

因为内容将在较小的视口中溢出。您的缩放问题可能来自以下因素的组合：

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

---

所以它看起来像是放大了

好的，我已经找到了这个问题的适当解决方案。问题是我将视口设置为设备宽度，这通常看起来是一件好事

当设备宽度低于为我的站点设置的最小宽度（本例中为400px）时，就会出现问题。因此，例如，如果设备宽度为320px，则视口将设置为该宽度，从而导致网页对于移动屏幕而言过大约80px

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

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

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

window.onload=函数（）{
if（window.innerWidth）我同意我不想阻止缩放，但我确实希望初始视图显示全宽。仍然不确定如何在指定最小宽度的同时实现这一点。我还没有指定overflow属性，因此它应该默认为visible。