本文详解为何基于 css 媒体查询的桌面/移动双显示方案失效，并提供可靠、现代、无需服务端脚本的纯前端修复方法，同时指出 php 用户代理检测的局限性与替代方案。
本文详解为何基于 css 媒体查询的桌面/移动双显示方案失效，并提供可靠、现代、无需服务端脚本的纯前端修复方法，同时指出 php 用户代理检测的局限性与替代方案。
您遇到的问题非常典型：在移动端始终显示 .desktop-display 内容，而 .mobile-display 完全不可见。根本原因并非代码逻辑错误，而是缺少关键的响应式视口元标签（viewport meta tag） —— 这是现代移动浏览器正确解析 @media (max-width: 800px) 的前提条件。
✅ 正确做法：补全视口声明 + 优化 CSS 结构
请确保
中包含以下元标签（必须位于所有 CSS 引入之前）：<meta name="viewport" content="width=device-width, initial-scale=1.0">
没有它，移动浏览器会以桌面宽度（如 980px）渲染页面，导致 max-width: 800px 媒体查询永远不生效。
此外，原 CSS 存在两个可优化点：
- media="all" 在
- 初始 .mobile-display { display: none } 和 .desktop-display { display: block } 可简化为更清晰的默认状态。
推荐修正后的完整代码如下：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式顶部提示</title><style>
/* 默认：桌面优先显示 */
.desktop-display { display: block; }
.mobile-display { display: none; }
/* 移动端覆盖：宽度 ≤ 800px 时切换 */
@media screen and (max-width: 800px) {
.desktop-display { display: none; }
.mobile-display { display: block; }
}
</style><div class="mobile-display">
My mobile content.
</div>
<div class="desktop-display">
My desktop content.
</div>
<!-- 其余页面内容 -->
⚠️ 关于 PHP 用户代理检测的说明（不推荐作为首选）
答案中提供的 PHP 方案虽能“工作”，但存在明显缺陷：
- 不可靠：HTTP_USER_AGENT 易被伪造或缺失（如隐私模式、部分 iOS WebView）；
- 维护成本高：需服务器环境，无法用于静态站点或 CDN 托管页面；
- 响应滞后：首次请求后才判断，不支持横竖屏实时切换；
- SEO 不友好：搜索引擎爬虫可能只抓取一种版本。
因此，纯 CSS 媒体查询 + 视口声明 是标准、轻量、可访问且符合现代 Web 最佳实践的首选方案。
✅ 额外建议：增强健壮性
- 使用 @media screen and (max-width: 768px) 更贴近主流平板断点；
- 添加 @media (hover: hover) 可区分触控/非触控设备；
- 对关键内容使用语义化标签（如
），兼顾无障碍访问。
只要确保视口元标签存在，您的原始 CSS 逻辑完全正确——无需服务端介入，即可实现精准、实时、零延迟的设备适配。
