容器宽度与移动设备上的视口宽度不匹配

Question

我为响应式设计重新编码了我的网站，并为外部容器div 设置了 HTML 视口、javascript 和 CSS，如下所示。在移动浏览器（Opera 和 Firefox）上，我遇到以下问题：

• 在纵向模式下（仅）页面加载正确，但窗口允许向右滚动，页面容器外有一列空白区域。我可以捏缩小，这样我就可以看到空间列。设置minimum-scale=1 只能防止捏拉缩小，但您仍然可以向右滚动。

设置overflow-x 可防止向右滚动，但这似乎很危险（如果由于某种原因右侧有数据，您希望能够找到它）。

注意事项：

• 横向模式可以正常工作。

• 桌面模式是正确的，除了一点点向右滚动。然而，我放大得越多（接近移动设备的视口及更大范围），右侧的空白区域就会增加得越多。

知道为什么右边有这个空间以及如何摆脱它吗？

HTML

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

CSS（相关）

.page-container {
    position: relative;
    width: 100%;
    min-width:240px;
}

JS

var jmq = window.matchMedia("screen and (max-width: 610px)");
jmq.addListener(jmqListener);

function jmqListener(jmq){
    if (jmq.matches || window.innerWidth < 611 ) {
        //Mobile or zoomed in desktop - resize controls
        ...
    } else {
        // full desktop site
        ...
    }

一张图抵得上一千个字——多余的空格在右边：

Answer 1

标题中某些元素的宽度是固定的。

.sitemessage h2 的固定宽度为 470px

.sitename 的固定宽度为 475px

将这些宽度设置为自动将更正问题。