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

我在建立一个响应式网站，我遇到了问题，这意味着当我在手机上查看它时，它会自动放大一小部分。我可以缩小以查看页面的整个宽度，但是当我点击指向另一个页面的链接时，新页面也会稍微放大（也许增加10％左右）。为什么CSS min-width导致我的响应网站在移动设备上放大？

我给自己定一个合适的视口应处理的问题：

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

我也设置在身上，这是必要的最小宽度低于这个宽度站点布局游：

body { 
    min-width: 400px; 
}

没有最小宽度的网站在移动设备上工作正常，但与最小宽度，页面加载略有放大。我试过这在Chrome和Android上的股票浏览器（在银河S3和Galaxy Nexus）的结果相同，所以看起来我是误解而不是发现了一个错误。

最终，我希望网站完全缩小（initial-scale = 1），最小显示宽度设置为400px，所以我不需要担心宽度更窄的布局。这是否可以实现？

来源

2014-09-04 Philip Wattis

好吧，我已经成功地找到适当的解决这个问题。问题是我将视口设置为设备宽度，这似乎是一件好事。

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

解决方案是一些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>

来源

2014-09-05 10:00:35

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

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

组合所以看起来它在放大真实。

来源

2014-09-04 17:01:09 sidj9n

我同意我不想阻止缩放，但我确实希望初始视图显示全宽。仍然不确定如何实现这一点，同时仍然指定最小宽度。我没有指定溢出属性，所以它应该默认为可见。 – 2014-09-05 08:24:53

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

回答

相关问题