智能手表CSS需禁用默认缩放、用vh/vmin替代rem、慎用pointer-events、使用系统默认字体栈；关键为viewport设user-scalable=no，font-size用vmin，按钮热区设min-height:12vmin，字体用- apple-system并指定font-weight:600。
智能手表CSS必须禁用默认缩放
很多开发者直接套用移动端rem方案，结果在Apple Watch或Wear OS上文字小得根本看不清——不是CSS没生效，是浏览器强制缩放把整个页面压扁了。viewport 里留 user-scalable=yes 或缺省该属性，系统就会按需缩放，反而让16px文字变成视觉上的8px。
实操只留三样：
-
width=device-width必须设，但不是为了“适配”，而是告诉系统“别猜，就按物理像素来” -
initial-scale=1.0必须显式写死，不能省略 -
user-scalable=no必须加，这是最常漏的一环
完整写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
用vh和vmin替代rem做基准单位
手表屏幕宽度可能只有144px（如Apple Watch SE），用rem依赖根字体大小，而系统字体设置、辅助功能缩放会彻底打乱计算。更稳的是直接锚定视口本身。
立即学习“前端免费学习笔记（深入）”；
常见错误：用1rem = 16px再换算成vh，结果在不同表盘上错位。正确做法是抛弃像素换算，用相对单位直连物理限制：
-
height: 100vh满屏高度，比100%更可靠（避免父容器未设高） -
font-size: 4vmin让文字随最小边等比放大，144×184屏下就是5.76px→实际渲染约12px（系统有下限保护） - 按钮最小点击区域设为
min-height: 12vmin，确保手指能点中（vmin防横竖屏切换时塌缩）
pointer-events: none要慎用，尤其在叠加层上
手表触控精度低，用户常误触背景层。有人给遮罩层加pointer-events: none想透传点击，结果点击完全失效——因为底层元素本身也小，且系统对连续两次touchstart间隔容忍极低，透传后事件坐标偏移直接丢弃。
更可行的解法：
- 遮罩层保留
pointer-events: auto，但用z-index明确层级 - 真正需要透传的交互，改用
hit-area扩展热区：padding: 8vmin比加pointer-events更可控 - 绝对避免在
position: fixed元素上设pointer-events: none，部分Wear OS版本会直接忽略该声明
字体加载失败时，系统回退极不可靠
手表端字体资源加载慢、易中断，@font-face 声明后若网络延迟，系统常回退到无衬线超细字体（比如Courier变San Francisco Compact但字重只剩Thin），导致文字几乎隐形。
保底策略很简单粗暴：
- 只用系统默认字体栈：
font-family: -apple-system, system-ui, sans-serif，不加引号、不写Roboto等具体名 - 强制字重：
font-weight: 600（不是bold，后者在手表上可能被映射成400） - 禁用
font-smoothing相关属性——所有手表OS都忽略它，还可能触发渲染bug
真要定制字体，必须内联woff2 base64，且体积压到2KB以内，否则首屏白屏超3秒。
极小屏幕的麻烦不在写多少CSS，而在每行声明都可能被硬件截断、重映射或静默忽略。盯住viewport、vmin、点击热区、字体回退这四点，比堆砌媒体查询管用得多。
