响应式网站在开发者工具与Android Chrome中显示差异问题

针对你遇到的WordPress站点在Android Chrome显示异常（仅头部可见、无内容、无法滚动），但开发者工具模拟正常的问题，按以下步骤排查：

1. 确认视口标签配置 #

检查主题header.php文件的<head>区域，确保包含正确的视口元标签：

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

如果缺失，添加该标签；如果已有，检查是否存在多余属性（比如user-scalable=no）导致布局异常。

2. 检查CSS样式冲突 #

• 使用Android Chrome的远程调试功能（电脑端Chrome打开chrome://inspect，连接开启USB调试的手机），查看页面内容元素的样式：
  • 确认内容容器是否被设置为display: none、visibility: hidden；
  • 检查body或html标签是否有overflow: hidden属性，这会导致无法滚动；
  • 排查是否有固定宽度的容器（如width: 1200px）未设置max-width: 100%，导致内容溢出屏幕外。
• 对比开发者工具模拟移动端时的样式，找出差异规则并修正。

3. 排查插件/主题JS冲突 #

• 临时禁用所有WordPress插件，刷新手机端页面，若恢复正常，再逐个启用插件定位问题插件；
• 检查主题的JS文件（如js/mobile.js）是否存在语法错误或逻辑问题，比如DOM加载完成前执行脚本导致内容未渲染，可在Chrome远程调试的Console面板查看报错信息。

4. 清除缓存 #

• 清除Android Chrome浏览器的缓存和站点数据；
• 若使用缓存插件（如WP Rocket、W3 Total Cache），清空插件缓存，并确保插件的移动端缓存规则正确；
• 为主题的CSS/JS文件添加版本号（如style.css?ver=20240520），强制浏览器加载最新资源。

5. 检查头部元素布局 #

• 查看头部导航是否设置了position: fixed，但未给body添加对应的padding-top，导致下方内容被头部覆盖；
• 检查头部元素的height是否设置过大，挤压了内容区域的空间。

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