Question

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

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

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

我还在主体上设置了最小宽度，这是必要的，因为网站布局中断了这个宽度：

body {
    min-width: 400px;
}

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

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

Answer 1

好的，我已经找到了解决这个问题的充分办法。问题是我将视口设置为设备宽度，这通常是一件好事。

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

解决方案是一些JavaScript，用于在窗口宽度小于或等于400像素的情况下将视口宽度从设备宽度更改为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;
}

所以看起来它已经放大了。

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

2 个答案: