移动端视口下网页渲染出现双倍宽度问题求助

移动端横向溢出适配解决步骤 #

1. 添加基础适配元标签

在HTML的<head>标签内插入以下代码，这是移动端适配的必备基础，作用是让浏览器按照设备实际宽度渲染页面，不会默认缩放：

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

2. 全局样式兜底

在CSS文件最顶部添加全局样式规则，统一盒模型计算逻辑，同时禁止横向滚动溢出：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}

3. 针对性修改溢出元素样式

• 所有需要占满整行的块级元素，不要使用100vw作为宽度取值，替换为width: 100%即可，100vw会包含系统滚动条宽度，很容易导致横向溢出
• 页面内的标题、输入框、按钮等元素不要写死固定宽度，改成max-width: 90%加width: 100%的组合，小屏自动适配宽度，大屏不会过宽
• 检查所有使用绝对定位、固定定位的元素，确认没有设置超过屏幕范围的偏移值，避免元素飘到可视区域外撑宽页面

4. 快速定位溢出元素的方法

如果修改完以上内容还有横向滚动条，可以打开浏览器调试面板，逐次删除页面内的元素，删到哪一个元素的时候横向滚动条消失，就对应修改该元素的宽度、边距、定位属性即可。

以上修改都只涉及HTML和CSS，不需要调整现有JS代码，操作完成后就能解决移动端页面过宽的问题。

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