移动端小屏幕元素右侧留白问题：原因与解决方案

复现代码 #

CSS

body {
    margin: 0;
}
div {
    box-sizing: border-box;
    background-color: red;
    width: 100%;
    height: 300px;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Text that overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows </div>
</body>
</html>

底层原理 #

Chrome DevTools的Mobile设备模式模拟移动设备视口行为，核心涉及两个视口概念：

• 布局视口：页面内容布局的基准宽度，默认可能宽于设备可视区域。
• 视觉视口：用户当前可见的页面区域，缩放操作会改变其大小。
  当存在无法换行的超长文本时，布局视口会被文本实际宽度撑开，而视觉视口仍保持设备设定宽度，导致div的width:100%（基于布局视口）在视觉上只占部分屏幕，右侧呈现留白。

产生原因 #

1. 超长文本撑大布局视口：未换行的超长文本突破div宽度限制，让布局视口宽度超过设备设定的可视宽度（450px以下）。
2. Mobile模式视口适配逻辑：DevTools的Mobile模式默认模拟移动设备视口缩放，布局视口被撑开后，视觉视口未自动匹配，导致div视觉显示宽度小于屏幕。
3. 设备类型切换副作用：切换到Desktop再切回Mobile时，DevTools重新计算视口，留白消失但页面放大，是因为视觉视口被调整为匹配布局视口，初始缩放比例被改变。
4. 真实设备行为差异：真实移动设备初始打开时，浏览器自动缩放视觉视口匹配布局视口；手动缩小页面后，视觉视口变小，布局视口仍保持撑开宽度，留白重现。

解决方法 #

方法1：强制文本换行 #

给div添加文本换行属性，避免超长文本撑大布局视口：

div {
    box-sizing: border-box;
    background-color: red;
    width: 100%;
    height: 300px;
    word-break: break-all; /* 允许在单词内强制拆分换行 */
    /* 或使用 overflow-wrap: break-word; 仅在单词过长时拆分 */
}

方法2：隐藏溢出内容 #

若无需显示全部超长文本，可隐藏溢出部分：

div {
    box-sizing: border-box;
    background-color: red;
    width: 100%;
    height: 300px;
    overflow: hidden; /* 隐藏水平溢出内容 */
    text-overflow: ellipsis; /* 可选：添加末尾省略号 */
    white-space: nowrap; /* 配合省略号保持单行显示 */
}

方法3：限制页面最大宽度 #

通过CSS强制页面最大宽度不超过视口，避免布局视口被撑开：

body {
    margin: 0;
    max-width: 100vw; /* 限制body最大宽度为视口宽度 */
    overflow-x: hidden; /* 隐藏水平方向溢出 */
}

内容的提问来源于stack exchange，提问作者user11655900