大屏及iPad竖屏模式下HTML Body右侧留白问题求助

我之前也碰到过完全一样的情况！你给body加的overflow-x:hidden和width:100%没生效，大概率不是body本身的问题，而是某个子元素偷偷超出了视口宽度，导致页面被撑开出现右侧留白。下面是我亲测有效的排查和解决步骤：

第一步：快速定位溢出元素 #

打开浏览器开发者工具（按F12），直接在控制台粘贴这段代码，它会把所有超出视口的元素用红色边框标出来，一眼就能找到“罪魁祸首”：

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('溢出元素:', el);
    el.style.outline = '2px solid red';
  }
});

第二步：常见溢出原因&对应修复 #

找到红色边框的元素后，对照下面的场景修复：

• 元素宽度+内边距超出100%：比如设置了width:100%; padding:0 30px;，这时候元素总宽度是100%+60px，必然溢出。给所有元素加上全局盒模型设置，从根源解决：

  * {
    box-sizing: border-box;
  }
  

• 固定宽度/min-width过大：比如某个元素写死了width:2000px或者min-width:1920px，把它改成max-width:100%或者适配不同屏幕的响应式宽度。
• 媒体元素（图片/视频）未做适配：给所有图片、视频加上max-width:100%; height:auto;，防止原始尺寸过大撑爆容器。
• 绝对定位元素失控：比如position:absolute的元素没设置right:0或者left:0，导致超出视口，调整它的定位属性或者给父元素加position:relative约束范围。

第三步：兜底的全局样式调整 #

如果还是找不到溢出元素，给最外层的html和body都加上约束，确保层级生效：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

另外检查你的viewport meta标签，iPad竖屏的适配经常和这个有关：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

最后小提醒 #

别死磕body的样式啦，90%的右侧留白都是子元素溢出导致的，用第一步的方法定位到元素，问题基本就解决一半了！

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