WordPress主题移动端Chrome浏览器左侧及下方空白问题求助

问题描述 #

所有页面在手机端Chrome浏览器浏览时，左侧及下方出现大面积空白区域，其他浏览器无此问题，推测与CSS相关，但多次修改CSS未解决。

主题默认添加的CSS代码如下：

@media (max-width: 991px) {
    .demo-marketplace .style-marketplace.filter-course .lp-form-course-filter .course-filter-submit {
        margin: 0;
    }
}
.thim-header-info > li svg {
    width: max-content;
}

排查与修复建议 #

• 检查视口设置：确认主题<head>标签内是否包含正确的视口元标签，缺失或错误会直接导致Chrome移动端布局异常：

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

• 处理元素溢出：Chrome对overflow属性的解析逻辑与其他浏览器存在差异，排查页面中是否有固定宽度元素（比如width:100vw加内边距/边框导致横向溢出），可先添加全局CSS测试：

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

• 调整SVG宽度：现有CSS中max-content值在Chrome移动端可能导致SVG元素宽度超出容器，尝试替换为具体数值或百分比：

  .thim-header-info > li svg {
      width: 24px; /* 根据实际视觉需求调整 */
      height: auto;
  }
  

• 插件冲突排查：暂时禁用所有WordPress插件，验证是否是插件CSS与主题样式冲突导致的问题。
• 响应式断点适配：主题设置的991px断点可能在Chrome小屏设备上触发异常，可补充针对更小屏幕（如max-width:767px）的CSS规则，覆盖冲突样式。

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