智能穿戴设备 viewport 必须设为 width=device-width 且 initial-scale=1，置于 head 顶部；用 flex-column 布局撑满屏幕，字号用 vw，媒体查询优先响应 height 和 orientation，图片需 srcset 适配 DPR。
智能穿戴设备的 viewport 设置必须严格匹配视口宽度
绝大多数智能手表或手环页面在加载时直接“放大错位”或“文字挤成一团”，根本原因是 <meta name="viewport"> 没写对，或者压根没加。它不是可选配置，而是渲染起点。
-
width=device-width必须拼写准确（不能是device_width或width=device） -
initial-scale=1不可省略，否则 Android Wear 或 watchOS 会默认缩放至 1.0 以上 - 绝对不要加
maximum-scale、user-scalable=no—— 手表屏幕小、操作精度低，禁用缩放等于放弃辅助功能 - 该标签必须放在
<head>最顶部，早于任何 CSS 或 JS，避免首次渲染闪动或重排
用 flex-direction: column + min-height: 100vh 控制单屏信息密度
智能穿戴屏（如 240×240、390×390、454×454）没有“滚动惯性”或“长按拖拽”习惯，用户预期所有关键信息在一屏内完成交互。强行用 overflow-y: auto 反而增加误触风险。
- 容器设
display: flex; flex-direction: column; min-height: 100vh;，让内容垂直堆叠并撑满屏幕 - 每个模块（如时间、心率、步数）用
flex: 0 0 auto固定高度，避免被拉伸变形 - 文字字号建议用
vw单位：例如font-size: 4.5vw;（在 390px 宽屏下 ≈ 17.5px），比 rem 更稳定；iOS Safari 10+ 和 Wear OS 3.0+ 均支持 - 避免
margin-bottom累加导致内容溢出，改用gap（需检查目标 WebView 是否支持：Android 4.4 系统 WebView 不支持gap，得退回到padding）
媒体查询要优先响应 height 和 orientation，而非只看 width
手表类设备横竖屏切换频繁，且物理高度常小于宽度（比如圆形表盘实际可视区域是正方形裁切），仅靠 max-width 断点会漏掉关键场景。
- 必须覆盖：
@media (max-height: 320px)（适配小方屏）、@media (min-height: 400px)（适配长条形表带屏） - 区分横竖屏用：
@media (orientation: landscape)和@media (orientation: portrait)，尤其对图表类组件——横屏时可横向铺开数据点，竖屏则折叠为卡片流 - 避免嵌套媒体查询：
@media (min-width) { @media (orientation) { ... } }在旧版 Tizen 或 LiteOS WebView 中会完全失效 - 别用
max-device-width：该属性已被废弃，且返回的是设备物理分辨率，不是当前视口尺寸；一律用max-width或max-height
图片与图标必须用 srcset + picture 配合 DPR 切换
智能穿戴设备 DPR（devicePixelRatio）差异极大：Apple Watch Ultra 是 3.0，华为 GT 系列常见 2.5，部分国产手环仍为 1.5。一张 200×200 的 PNG 在高 DPR 下会模糊，但全量加载 600×600 又浪费带宽和内存。
立即学习“前端免费学习笔记（深入）”；
- 基础图标配
img { width: 100%; height: auto; }，防止溢出容器 - 关键图标（如电池、蓝牙状态）用
<picture>+srcset显式提供多倍图：<picture> <source srcset="icon@3x.png" media="(resolution: 3dppx)"> <source srcset="icon@2x.png" media="(resolution: 2dppx)"> <img src="icon.png" alt="battery"> </picture>
- 避免用 CSS
background-image加background-size: cover做图标——无法响应 DPR 切换，且在低内存设备上易触发渲染丢帧
真正难的不是写出适配代码，而是验证：真机调试时，window.devicePixelRatio 和 screen.width 的值必须和设计稿标注一致；模拟器里调出来的 DPR 往往不准，尤其 Tizen Studio 的模拟器常固定返回 2.0。别跳过这一步。
