HTML不标注设备型号，兼容性依赖UA检测、响应式断点和特性检测等外部手段；viewport meta仅控制布局宽度而非识别机型；CSS媒体查询基于可观测特征而非型号名；UA字符串不可靠，应优先使用特性检测。
HTML 本身不标注设备型号，也不内置机型适配列表
HTML 是标记语言，不是设备识别工具。它没有 device-model 属性、不提供 iphone-14 或 samsung-s23 这类语义标签，浏览器也不会因为你在 里写个 data-model="pixel-8" 就切换渲染逻辑。
所谓“兼容机型列表”，实际是开发或测试阶段的人为约定，靠外部手段（如 UA 检测、响应式断点、特性检测）间接实现，HTML 文件里只负责承载结果，不定义规则。
用 viewport meta 控制移动设备基础缩放行为
这是最常被误认为“指定机型”的地方——其实它只告诉浏览器“按什么宽度来布局”，不识别具体设备。
-
<meta name="viewport" content="width=device-width, initial-scale=1">是底线，缺了它，iOS Safari 会强制以 980px 渲染，文字小得看不清 -
width=device-width不等于“适配 iPhone 15”，而是取当前设备的 CSS viewport 宽度（比如 iPhone 15 Pro Max 竖屏下是 430px） - 加
maximum-scale=1会禁双指缩放，对可访问性不友好，除非有强交互约束 - 安卓 WebView 对
viewport解析更松散，部分旧版 UC 浏览器会忽略user-scalable=no
靠 CSS 媒体查询区分设备能力，而非型号名
你没法在 CSS 里写 @media (model: "galaxy-z-fold5")，但能通过屏幕尺寸、折叠状态、指针精度等可观测特征做分层适配：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 480px)匹配小屏，但不区分是 iPhone SE 还是老款 Moto G -
@media (hover: hover) and (pointer: fine)可筛出带鼠标/触控笔的平板（如 Surface），排除多数手机 -
@media (display-mode: standalone)识别 PWA 全屏模式，和是否是 Pixel 无关 - 折叠屏要用
@media (horizontal-viewport-segments: 2)或@media (spanning: single-fold-vertical)，而不是硬编码z-fold
服务端或 JS 做 UA 解析时，别信“iPhone OS 17_5”这种字符串
用户代理（UA）字符串是客户端声明的，可伪造、可截断、可省略关键字段，连“iPhone”都可能被安卓浏览器伪装出来。
-
navigator.userAgent在 iOS 17+ 的 Safari 默认不暴露完整版本号，只返回"iPhone"，没数字 - 用正则匹配
/iPhone.*OS (\d+)_/在 iOS 17.4+ 会失效，得 fallback 到navigator.platform === "iPhone"+ 特性检测 - 安卓厂商 UA 差异大：华为 EMUI 可能写
HUAWEI ANA-NX9，但同型号不同系统版本 UA 字符串长度不同，截断后丢失关键信息 - 真正要区分性能等级？不如测
performance.memory或跑一个轻量 Canvas 渲染帧率，比 UA 可靠得多
机型兼容性不是贴标签，是持续验证的过程。每次新机发布，CSS 断点可能依然有效，但 touchstart 延迟、video 编解码支持、WebGL 扩展这些底层差异，才真正决定页面能不能用。
