本文详解通过纯 CSS 媒体查询实现桌面与移动设备差异化显示的正确方法，指出原代码失效的根本原因（缺少 viewport 元标签），并提供可直接运行的修复方案、完整示例及关键注意事项。
本文详解通过纯 css 媒体查询实现桌面与移动设备差异化显示的正确方法，指出原代码失效的根本原因（缺少 viewport 允许缩放的元标签），并提供可直接运行的修复方案、完整示例及关键注意事项。
您遇到的问题非常典型：CSS 媒体查询未生效，导致 .mobile-display 和 .desktop-display 在移动设备上始终显示桌面版本内容。根本原因并非 CSS 逻辑错误，而是缺失关键的响应式基础—— 标签。
现代移动浏览器默认以桌面视口宽度（通常约 980px）渲染页面，并进行缩放，这使得 @media (max-width: 800px) 查询永远无法匹配——即使你在手机上查看，实际视口宽度仍远大于 800px。
✅ 正确解决方案（推荐：纯前端、标准、可维护）
只需在
<meta charset="UTF-8"><!-- ✅ 关键修复：启用响应式视口 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式内容切换</title><style>
/* 默认状态：面向桌面 */
.mobile-display { display: none; }
.desktop-display { display: block; }
/* 移动优先适配：当视口 ≤ 800px 时激活移动样式 */
@media (max-width: 800px) {
.desktop-display { display: none; }
.mobile-display { display: block; }
}
</style><div class="mobile-display">
? 我是专为手机优化的内容（仅在小屏显示）
</div>
<div class="desktop-display">
?️ 我是为桌面设计的内容（默认显示，小屏隐藏）
</div>
<!-- 其余页面内容 -->
⚠️ 注意事项与最佳实践：
- viewport 必须存在：content="width=device-width, initial-scale=1.0" 是响应式布局的基石，缺一不可；
- 避免使用 PHP UA 检测：答案中提供的 PHP 方案存在严重缺陷——strpos(..., "mobile") 判定极不可靠（如部分 iPad UA 不含 "mobile"，但属平板；Chrome 桌面版开发者工具模拟移动设备时 UA 可能被篡改），且服务端检测无法响应用户旋转屏幕或调整浏览器窗口等实时变化；
- 建议升级断点策略：800px 并非标准移动阈值，更推荐使用 @media (max-width: 767px)（适配常见手机）或采用移动优先写法（先写移动端样式，再用 min-width 覆盖桌面）；
- 语义化增强：对辅助技术友好，可为隐藏元素添加 aria-hidden="true"，例如
