Bootstrap4网站iPhone7两侧留白，使用overflow-x:hidden后出现异常问题

• 将html,body{overflow-x: hidden} 嵌套在max-width: 575.98px的媒体查询范围内，是触发后续布局异常的直接原因
• 当iOS Safari检测到页面存在横向溢出内容时，会自动调整视口缩放比例适配全内容宽度。这段代码在xs断点下隐藏横向溢出的写法，会打断浏览器正常的宽度计算逻辑，导致视口尺寸校准出错，后续栅格组件无法获取正确的父容器宽度，最终渲染为0高度、内容区全白的状态。同时错误的宽度计算会让视口整体缩放尺寸偏小，出现视口下方的多余留白。
• 最初iPhone7上两侧留白的问题，和强制隐藏横向滚动条无直接关联：这类场景的常见成因为页面外层容器未正确嵌套Bootstrap自带的container类，导致.row元素自带的左右15px负margin直接撑出视口边界；或是缺少正确的视口meta配置，iOS设备默认按桌面宽度渲染页面再自动缩放形成留白。

• 把html, body { overflow-x: hidden; } 从xs断点的媒体查询中移出，放置到全局基础样式段，同时给html元素补充max-width: 100vw规则，避免宽度计算偏差
• 逐段检查页面外层结构：所有.row容器必须被Bootstrap的.container或.container-fluid类包裹，抵消row自带的负margin，从根源上消除横向溢出
• 确认页面头部正确配置视口标签：

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  

  强制iOS设备按设备实际宽度渲染页面，避免默认桌面宽度渲染导致的两侧留白
• 不要用全局隐藏横向滚动条的方式掩盖溢出问题：调整后打开500px宽度的调试模式，逐元素排查渲染宽度超出100%视口的组件（常见为未设置max-width:100%的图片、固定宽度模块），修正元素自身的宽度设置即可。

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