移动设备网页上的额外空白区域

Question

在移动设备上查看网站时，右侧有一个奇怪的差距，如何摆脱它？我希望网页能够填满整个屏幕宽度。

我知道，关于同样的事情有十几个问题，我已经阅读了很多。他们都没有工作。

我还附上了问题的图像。

我尝试过的事情 - def SGTOffset(dt=None): return (dt or datetime.now()) + timedelta(hours=8) overflow-x: none margin: 0px padding: 0px

要查看问题，您只需转到website并在移动设备或附加图片或开发工具上查看。

不幸的是，css是不可读的，因为我写的是sass，我会在问题中附加HTML和sass，或者你可以在GitHub上查看整个内容。

HTML

width: 100%

SASS

<header><h2>Tic Tac Toe</h2></header><button id="theme">Change Theme    </button>

<div id="main">

<div id="first" class="default">
</div>

<div id="second" class="default">
</div>

<div id="third" class="default">
</div>

<div id="fourth" class="default">
</div>

<div id="fivth" class="default">
</div>

<div id="sixth" class="default">
</div>

<div id="seventh" class="default">
</div>

<div id="eight" class="default">
</div>

<div id="nine" class="default">
</div>
</div>

Answer 1

在index.css的第208行，您定义了

.static #first, .static #second, .static #third, .static #fourth, 
.static #fivth, .static #sixth, .static #seventh, .static #eight, 
.static #nine {
    /*...*/
    width: 33%
    /*...*/
}

将其更改为width: 33.3333%;。应该将瓷砖的轻微倾斜固定在左侧。

更重要的是，添加

html, body {
    min-width: 100vw;
    overflow-x: hidden;
}

确保您的页面始终等于视口宽度。

作为旁注，在同一文件的189行，overflow-x应该是hidden，而不是none。

Answer 2

＆＃13;

＆＃13;

#main,#buttons,#scoreboard,head,button
{
  margin:0 auto; 
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我修好了！

这是#theme，它右边有一个额外的10px边距，我刚删除它并且它有效。更新了网站。

谢谢，无论如何。