移动端网页左滑出现多余空白的HTML/CSS适配问题咨询

单纯给元素设置max-width无法彻底解决这个横向滑动出空白的问题，问题本质是页面内存在宽度超出移动端视口的元素，把整个页面的可滚动宽度撑大了，你怀疑的sticky粘性头部、回到顶部按钮确实是这类问题的高发区，按下面的步骤排查修复即可：

• 先上全局兜底规则，从根节点阻断横向溢出：在全局CSS最顶部加入以下代码

html, body {
  width: 100%;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}

注意：overflow-x: hidden必须同时加在html和body两个标签上，只加给body在部分iOS Safari、安卓自带浏览器里会失效；全局box-sizing: border-box可以避免元素因为加了内边距、边框导致实际宽度超出设定值的问题。

• 快速定位溢出元素：不用盲目猜问题来源，打开Chrome开发者工具切换到移动端调试模式，临时给通配选择器加outline: 1px solid red;样式，所有元素的外轮廓都会显示为红色，一眼就能找到哪个元素的轮廓伸出了移动端视口范围。
• 对应高发问题的修复方式：
  • 如果溢出源头是sticky粘性头部：检查头部是否写死了大于视口宽度的固定像素值、是否设置了负的左右外边距，把宽度改成width: 100%搭配max-width: 100vw即可，同时检查头部是否带了不必要的左右方向transform偏移，这类偏移也会撑出页面宽度。
  • 如果溢出源头是回到顶部按钮：这类固定定位的按钮如果设置了负的right值（比如right: -20px把按钮一半挪到视口外），就会触发横向滚动，把right值改成正的合理间距（比如right: 1rem）就能解决。
  • 其他常见溢出场景：轮播组件、营销横幅、绝对定位的下拉菜单如果宽度超出视口、父元素没加溢出裁切，也会撑宽页面，找到对应元素给父容器加overflow: hidden、限制子元素最大宽度为100%即可。
• 关于max-width的实际作用：给对应溢出元素加max-width: 100%/max-width: 100vw确实可以限制元素不超出视口，但必须精准加到出问题的元素上才有用，盲目给所有元素加max-width会打乱原有页面布局，不推荐这么操作。

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