纯 HTML 无法做设备类型检测，因其无运行时逻辑能力；<meta name="viewport">仅控制缩放而非识别设备；真实检测需用 JavaScript 的 userAgent 或 matchMedia，CSS 媒体查询应基于交互特性（如 pointer: coarse）而非设备类型。
纯 HTML 无法做设备类型检测——它没有运行时逻辑能力，所有“HTML 检测”本质都是误导或混淆了技术边界。
为什么 <meta name="viewport"> 不是设备检测
这个标签只告诉浏览器如何缩放页面，不读取任何设备信息，也不触发条件渲染。它在 PC、手机、平板上都会被解析，但不会让 HTML 自己“知道”当前是什么设备。
- 常见误解：把
<meta>当成“移动端适配开关”，其实它只是 CSS 媒体查询生效的前提 - 真实作用：禁用双击缩放、设定初始缩放比例，和设备识别无关
- 错误写法：
<meta name="device" content="mobile">—— 浏览器完全忽略，无标准定义
真正可用的检测方式只有 JavaScript 的 navigator.userAgent 或 matchMedia
用户代理字符串（userAgent）仍是目前最直接的线索，但必须配合特征关键词判断，不能依赖完整匹配。
- PC 判断可看是否含
"Windows"、"Macintosh"、"Linux"且不含移动关键词 - 移动设备优先匹配
"iPhone"、"Android"、"Mobile"（注意：iPad 默认不含"Mobile"） - 平板需单独处理：含
"iPad"或"Tablet"，或用window.matchMedia("(min-width: 768px) and (max-width: 1024px)")辅助判断 - ⚠️ 风险：
userAgent可被伪造、Chrome 已逐步弃用部分字段（如chrome/120.0.0.0后不再暴露完整平台）
CSS 媒体查询不是检测，但能实现“按设备特性响应”
不要试图用 @media 获取设备类型字符串，它只能根据视口宽度、指针精度、横竖屏等可观测特性应用样式。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
@media (pointer: coarse)—— 匹配触摸屏（手机/平板），比查"Android"更可靠 - 避免写法：
@media (max-width: 767px)→ 这是“小屏”，不是“手机”，折叠屏展开后可能宽过 900px 仍为手机 - 组合判断更稳：
@media (hover: hover) and (pointer: fine)基本等于桌面鼠标设备 - 注意：
screen.width和innerWidth是 JS 层概念，CSS 里不可用
设备类型不是非黑即白的分类，现代设备（折叠屏、二合一、桌面版 Safari 模拟移动视口）会让任何基于字符串或固定宽度的判断失效。真正该检测的不是“设备型号”，而是“当前交互能力”和“可用空间”。
