dom深度必须压到≤3层，因智能穿戴设备渲染引擎对嵌套层级敏感，实测div嵌套超3层（如...）会导致性能显著下降。

DOM深度必须压到≤3层

智能穿戴设备（如手表、手环）的渲染引擎对嵌套层级极其敏感。实测发现，div嵌套超过3层（例如 <div><div><div><p>...</p></div></div></div>）会导致鸿蒙 Lite 模式下字体缩放异常、Wear OS 4.0 中 flex 布局计算失败，甚至 watchOS 16.4 直接跳过渲染部分节点。

关键不是“能不能写”，而是“写了是否生效”。所有语义化标签（<section></section>、<article></article>、<nav></nav>）在此场景下一律禁用——它们不提供额外渲染收益，反而增加解析负担。

• 只保留 <main></main> 和必要时的 <header></header>（仅用于基础可访问性）
• 用 <div> 承载全部视觉模块，但每层 <code><div> 必须有明确作用（如控制高度、隔离点击区域） <li>Vue/React 组件输出需开启 <code>fragment，避免框架自动注入根 <div> <h3>flex-direction: column 是唯一可靠的垂直布局方式</h3> <p>别信“用 grid 做卡片流更现代”——在穿戴端，<code>grid 的隐式轨道生成和 gap 支持率极低：gap 在 Android 4.4 WebView 和 watchOS 16.4 中完全不识别；grid-template-rows 缺失时，每行高度为 auto，导致时间模块被心率模块挤出视口。

  真实可用的方案只有一条：父容器设 display: flex; flex-direction: column; min-height: 100vh;，每个子模块用 flex: 0 0 auto 固定高度（如 height: 24px），靠 gap 或 padding 分隔。

  • 横屏场景下仍用 column，只是把图表数据横向铺开（靠 white-space: nowrap + overflow-x: auto）
  • 禁止在 flex 容器内再套 flex —— 这不是“组合能力”，是结构设计没想清的信号
  • justify-content: space-between 在小屏上容易造成顶部空白过大，改用 align-items: flex-start + 显式 padding-top

  媒体查询必须基于 height + orientation + dpr 三重判断

  @media (max-width: 320px) 在手表上基本无效。设备物理宽度（如 Galaxy Watch 4 的 320px）≠ 视口宽度（系统 UI 占用后常只剩 280px），且圆形表盘实际渲染区域是正方形裁切（如 160×160），width 查询会漏掉大量设备。

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载

  真正起效的写法只有三种组合：

  • @media (width: 160px) and (height: 160px) —— 覆盖 Fitbit Ionic 等基础圆形表盘
  • @media (min-resolution: 2dppx) and (width: 320px) —— 针对高 DPR 方形屏（注意：dppx 不是 dpi，不能写成 2dpi）
  • @supports (display: flex) { ... } —— 必须加兜底，因为 watchOS WebKit 仍不支持 flex-wrap 或 gap

  别嵌套媒体查询：@media (min-width) { @media (orientation) { ... } } 在 Tizen 和 LiteOS WebView 中直接失效。

  图片与图标必须放弃 srcset，改用 data URI 或系统字体

  <picture></picture> 和 srcset 在穿戴设备上根本不会触发多图切换逻辑——引擎只加载首帧，且无法解析 sizes 表达式。实测中，带 srcset 的 <img> 在 Wear OS 上比单图加载慢 120ms，watchOS 则直接 fallback 到空白。

  可行路径只有两条：

  • SVG 图标转 data:image/svg+xml;base64,... 内联，确保无网络依赖、无解析延迟
  • 使用系统图标字体（如 watchOS 的 SF Symbols、Wear OS 的 Material Icons），通过 <span class="icon-time"></span> 调用
  • 绝对不要用 background-image 加载 SVG —— 多数穿戴 WebView 不支持 CSS 中的 data URI 背景

  复杂点在于：同一张 SVG 经不同工具 base64 编码后长度可能差 20%，而穿戴端总节点数硬限