移动端浏览器HTML除绝对定位导航栏外内容左偏，桌面模拟无异常如何修复

修复方案 #

• 第一步：先测试全局横向溢出隐藏
  在custom.css中添加如下代码，90%以上的同类偏移问题都是页面元素横向超出视口导致的：

html, body {
  overflow-x: hidden;
}

绝对定位的导航栏脱离了正常文档流，所以不受整体溢出的影响，和描述的现象完全吻合，桌面端模拟环境和实机的滚动条、视口计算逻辑有差异，所以没复现问题。

• 第二步：调整viewport元标签兼容移动端
  现有viewport配置中的shrink-to-fit=no在部分旧版本iOS Safari上存在兼容问题，会导致页面自动缩放偏移，可以替换为如下配置：

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

• 第三步：校验Bootstrap布局规则
  Bootstrap的row类默认自带左右负margin，必须包裹在container或container-fluid类的父容器内，否则就会出现横向溢出。可以直接给main元素添加适配的padding或者容器类：

.main {
  min-height: 80vh;
  /* 如需固定宽度居中布局加下面两行 */
  padding: 0 15px;
  max-width: 1320px;
  margin: 0 auto;
  /* 如需通栏布局就只保留padding: 0 15px; 即可 */
}

• 第四步：实机调试定位异常元素
  如果以上方案都无效，可以通过移动端远程调试功能（安卓用Chrome远程调试、iOS用Safari远程调试），检查body、main以及内部子元素的实际宽度，定位出宽度超出视口的异常元素，针对性做响应式适配即可。

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