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

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

您在标题中的某些元素上有固定的宽度。

Nodes = 4 (1 Master, 3 DN ) memory = 64 GB on each node Processors = 6 on each node 1 TB on each node (5 Disk * 200 GB) 的固定宽度为470px

.sitemessage h2的固定宽度为475px

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