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

Question

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

在纵向模式下（仅）页面加载正确，但 window 允许向右滚动，其中页面容器外有一列空白 space。我可以捏缩小，以便可以看到 space 的列。设置 minimum-scale=1 只能防止捏合缩小，但您仍然可以向右滚动。

设置 overflow-x 防止向右滚动，但这看起来很危险（如果出于某种原因右侧有数据，您希望能够访问它）。

备注：

横向模式工作正常。
桌面模式是正确的，除了稍微向右滚动。然而，我放大得越多（视口接近移动设备和更远的设备），右边的空白 space 增加得越多。

知道为什么这个 space 在右边以及如何摆脱它吗？

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

一图抵千字-多余的space在右边：

Answer 1

您的页眉中的某些元素具有固定宽度。

.sitemessage h2 固定宽度为 470px

.sitename 固定宽度为 475px

将这些宽度设置为自动将解决此问题。

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

Container width not matching viewport width on mobile device

html

css

viewport

responsive-design