本文详解通过纯 CSS 媒体查询实现桌面与移动设备差异化显示的正确方法，指出原代码失效的根本原因（缺少 viewport 元标签），并提供可直接运行的修复方案、完整示例及关键注意事项。
本文详解通过纯 css 媒体查询实现桌面与移动设备差异化显示的正确方法，指出原代码失效的根本原因（缺少 viewport 允许缩放的元标签），并提供可直接运行的修复方案、完整示例及关键注意事项。
您遇到的问题非常典型：CSS 媒体查询未生效，导致 .mobile-display 和 .desktop-display 在移动设备上始终显示桌面版本内容。根本原因并非 CSS 逻辑错误，而是缺失关键的响应式基础——<meta name="viewport"> 标签。
现代移动浏览器默认以桌面视口宽度（通常约 980px）渲染页面，并进行缩放，这使得 @media (max-width: 800px) 查询永远无法匹配——即使你在手机上查看，实际视口宽度仍远大于 800px。
✅ 正确解决方案（推荐：纯前端、标准、可维护）
只需在 <head> 中添加 viewport 元标签，并微调您的 CSS：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
</head>
<body>
<div class="mobile-display">
? 我是专为手机优化的内容（仅在小屏显示）
</div>
<div class="desktop-display">
?️ 我是为桌面设计的内容（默认显示，小屏隐藏）
</div>
<!-- 其余页面内容 -->
</body>
</html>⚠️ 注意事项与最佳实践：
- 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"，例如 <div class="desktop-display" aria-hidden="true">。
总结：响应式内容切换应优先依赖标准 CSS 媒体查询 + 正确 viewport 配置。它轻量、可靠、可逆、支持动态重绘，是现代 Web 开发的首选方案。
