本文详解通过纯css媒体查询实现桌面与移动设备内容差异化显示的正确方法，并指出常见错误及解决方案，避免依赖服务端php判断。
本文详解通过纯css媒体查询实现桌面与移动设备内容差异化显示的正确方法，并指出常见错误及解决方案，避免依赖服务端php判断。
要让 .mobile-display 和 .desktop-display 在不同设备上正确切换显示，核心在于确保CSS媒体查询生效的前提条件被满足。您提供的代码逻辑本身合理，但实际未生效，主要原因通常是：缺少响应式视口（viewport）元标签。
在HTML
中，必须添加以下meta标签，否则移动浏览器会以桌面宽度渲染页面（如980px），导致 @media (max-width: 800px) 永远不匹配：<meta name="viewport" content="width=device-width, initial-scale=1.0">
✅ 正确完整的实现示例（纯前端、语义清晰、无需PHP）：
<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 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>
<!-- 其余页面内容 -->
? 关键注意事项：
- @media (max-width: 800px) 中的 800px 是断点值，建议使用更通用的移动断点（如 480px 或 768px），并结合 screen 媒体类型提高兼容性；
- 避免使用 media="all" 在
- PHP用户代理检测（如答案中所示）不推荐作为首选方案：它无法响应屏幕旋转、窗口缩放、开发者工具模拟等动态场景，且存在UA伪造、平板误判（如iPad可能无“mobile”字符串）、服务器缓存等问题；
- 更健壮的现代替代方案可考虑 @container（容器查询）或结合JavaScript监听 window.matchMedia()，但对基础设备适配，标准CSS媒体查询 + 正确viewport已完全足够。
总结：修复只需两步——① 添加 viewport meta 标签；② 移除
