WordPress移动端页面无法全屏显示：内容左偏右侧留白

• 检查元素溢出情况
  用浏览器开发者工具的移动端调试模式，逐一排查是否有元素（图片、容器、绝对定位组件等）的总宽度超出视口。比如图片未设置max-width: 100%、容器写死固定宽度（如width: 750px）、元素的padding/margin累加后超过100vw，这些都会导致页面被撑开出现右侧留白。

• 确认视口元标签配置
  检查HTML头部的视口标签是否正确配置，必须包含width=device-width，否则移动端会按桌面宽度渲染后缩放，必然出现偏移和留白：

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

• 排查全局样式问题
  检查html/body是否存在默认边距未重置，或父容器设置了overflow-x: visible导致溢出。可先添加基础重置代码辅助排查：

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

  注意overflow-x: hidden仅用于排查，若页面有需要横向滚动的元素，需后续调整。

• Flex/Grid布局校验
  若使用弹性或网格布局，检查子元素是否设置了flex-shrink: 0导致无法自适应收缩，或网格列宽用了固定值而非fr/minmax这类自适应单位，引发布局溢出。

• 绝对定位元素排查
  暂时隐藏页面中的绝对定位元素（弹窗、悬浮图标等），看留白是否消失。这类元素若right/left值设置错误、宽度超出父容器范围，也会撑开整个页面。

• 统一盒模型规则
  添加全局盒模型设置，确保元素的内边距和边框不会额外增加总宽度，避免布局计算误差：

  * {
    box-sizing: border-box;
  }
  

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