html页面在移动端和PC端小尺寸右边有溢出空白的解决方案

发布于 2023-08-13  1320 次阅读


内容纲要

如上图所示,当使用bootstrap或者原生js的时候,在移动端或者pc端小窗口中访问页面会产生右边存在溢出空白的情况。

这种情况一般不是页面本身大小的问题,因为一般我们都会设置:

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

页面本身是适应屏幕尺寸的,但是仍然会出现右边溢出的情况,这时候手机端可以左右滑动,PC端会出现滚动条。

导致这种问题的一般原因是子元素的宽度溢出,超出了整个页面的宽度,导致页面被撑开,这时候及时你定义了Body的宽度也无济于事。

例如我使用的bootstrap框架出现这种问题,代码是:

<div class="row header">
            <div class="col-xs-4 title">
                <span style="color:white">浏览得红包</span>
                <span class="time">计时器</span>
            </div>
        </div>

因为bootstrap的.row类默认有以下属性:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

左右的边距为-15px 这时候就会向左右扩展15像素导致页面溢出。

同样的 如果是原生css,没有处理好正确的边距和宽度都会导致溢出。

解决这种问题的方法很简单,首先通过F12调出浏览器工具,点击跟随鼠标按钮,然后将鼠标从溢出的白边从上往下划,找到溢出的元素,然后适配溢出元素的宽度和边距即可。

例如:

将鼠标移动到右边红色圆圈圈出来的地方,发现有溢出元素的显示,然后点击查看代码,找到溢出的元素。

给溢出的元素赋属性:

.row{
            max-width: 100vw !important;
        }

完美解决!