为什么CSS最小宽度导致我的响应网站被放大在手机上？ [英] Why is CSS min-width causing my responsive site to be zoomed in on a mobile?

问题描述

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

I'm building a responsive website and I'm having a problem with it which means that when I view it on a mobile, it's automatically zoomed in by a small amount. I can zoom out to view the whole width of the page, but when I click on a link to another page, the new page loads in slightly zoomed in as well (maybe by 10% or so).

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

I've set an appropriate viewport which should deal with the problem:

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

我也在body上设置了最小宽度，这是必要的， break：

I also have set a minimum width on the body, which is necessary as below this width the site layout breaks:

body {
    min-width: 400px;
}

没有min-width网站在移动设备上正常工作，最小宽度，页面加载轻微放大。我试过这个在Chrome和股票浏览器Android（在Galaxy S3和Galaxy Nexus）具有相同的结果，所以似乎我误解了一些东西，而不是发现一个

Without the min-width the site works fine on mobile devices, but with the min-width, the pages load slightly zoomed in. I've tried this on Chrome and the stock browser on Android (on a Galaxy S3 and Galaxy Nexus) with the same results, so it seems I am misunderstanding something rather than having discovered a bug.

最后，我希望网站完全缩小（初始缩放= 1），最小显示宽度设置为400像素，因此我不需要担心布局在更窄的宽度。这是可以实现的吗？

Ultimately I want the site fully zoomed out (initial-scale=1) and the minimum display width set at 400px so I don't need to worry about layouts at tighter widths. Is this even achievable?

推荐答案

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

Okay, I've managed to find an adequate solution to this problem. The issue is that I was setting the viewport to the device-width, which generally seems to be a good thing to do.

问题出现在设备宽度较低比为我的网站设置的最小宽度（在此实例中为400像素）。因此，例如，如果设备宽度为320像素，则视口设​​置为此宽度，导致移动屏幕的网页大小约为80像素。

The problem arises when the device width is lower than the minimum width set for my site (400px in this instance). So, for example, if the device width is 320px, the viewport is set to this width resulting in the web pages being about 80px too large for the mobile screen.

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

The solution is some JavaScript to change the viewport width from device-width to 400 in instances where the window width is less than or equal to 400 pixels. This snippet of code addressed the problem:

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

这篇关于为什么CSS最小宽度导致我的响应网站被放大在手机上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！