iPhone移动端水平滚动/空白问题排查求助（WordPress+Bricks Builder）

1. 检查Bricks全局与页面容器设置 #

• 进入Bricks全局样式面板，确认全局容器是否开启响应式宽度，避免移动端被强制设置固定宽值（如大于375px的固定宽度）。
• 排查页面内的自定义容器，是否存在手动设置min-width为固定值的情况（比如min-width:1200px），这类属性会直接突破移动端视口约束。

2. 定位溢出的图片与文本元素 #

• 用Chrome DevTools模拟iPhone设备，开启元素高亮模式逐个检查：
  • 给所有图片强制添加约束样式，避免原始宽高突破容器：

    img {
      max-width: 100% !important;
      height: auto !important;
    }
    

  • 针对无空格长文本（如URL、代码串）添加换行规则，防止撑破容器：

    p, span, .bricks-text-element {
      overflow-wrap: break-word;
      word-break: break-all;
    }
    

3. 排查动态内容与第三方插件 #

• 检查页面内的动态内容（如ACF字段、自定义短代码），确认是否输出了未被约束的外部元素（如iframe、脚本生成的模块）。
• 临时禁用所有第三方插件，测试是否是插件冲突导致的元素溢出（比如广告插件、统计脚本添加了超出视口的隐藏元素）。

4. 验证视口元标签 #

• 检查网站<head>区域的视口标签是否正确，Bricks默认会生成，但可能被主题或插件篡改：

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

  缺失或参数错误会直接导致移动端视口计算异常。

5. 用代码快速定位溢出元素 #

• 在Chrome DevTools控制台执行以下代码，会用红色边框标记出所有超出视口的元素：

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

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