html - 移动设备上网页中的额外空白

Question

在移动设备上浏览网站时，右边有一个奇怪的空隙，如何解决？我希望网页填满屏幕的整个宽度。

我知道，有很多关于同一件事的问题，我已经阅读了很多。它们都不起作用。

我还附上了问题的图片。

我尝试过的事情 - overflow-x: none margin: 0px padding: 0px width: 100%

要查看问题，您可以转到 website并在移动设备或附加图像或开发工具上查看它。

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

HTML

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

SASS

 #first,#second,#third,#fourth ,#fivth,#sixth,#seventh,#eight,#nine
    display: flex
    justify-content: center
    position: relative
    align-items: center
    box-sizing: border-box
    float: left
    width: 33%
    height: 33.3333%
    z-index: 1000

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

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

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