必须禁用 viewport 缩放，否则媒体查询失效；正确写法为 ，并优先使用 vmin 单位和 min-width 断点。
viewport必须禁用缩放，否则媒体查询失效
智能手表上 @media (max-width: 200px) 之类规则不触发，往往不是CSS写错了，而是浏览器在后台偷偷缩放了整个页面——导致实际视口宽度远大于物理像素。Apple Watch 和 Wear OS 都默认启用 pinch-to-zoom，哪怕你没做任何手势，系统也会为“可读性”自动压缩布局。
解决方法只有一条铁律：HTML 的 <meta> 标签里必须显式关闭缩放：
-
width=device-width是基础，但它只是告诉浏览器“别瞎猜”，不是为了适配 -
initial-scale=1.0必须写死，不能省略或设为其他值 -
user-scalable=no是关键，漏掉它，所有基于视口的媒体查询都不可靠
完整写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
别用 max-width 做手表断点，改用 min-width + vmin 单位
手表屏幕宽度普遍在 144px～200px（如 Galaxy Watch6 圆形屏有效视口约 176×176），用 @media (max-width: 199px) 看似合理，但一旦用户开启辅助字体放大（Android 系统级设置），视口 CSS 像素会进一步收缩，原本能触发的断点反而跳过。
更稳的做法是放弃“上限思维”，转为“下限增强”：
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
- 先写默认样式，针对最小可能视口（比如
font-size: 3vmin、padding: 2vmin） - 用
@media (min-width: 180px)这类窄范围断点做微调，而非覆盖全部小屏 - 所有尺寸单位优先用
vmin，不用rem或px：文字用font-size: 4vmin，按钮热区用min-height: 10vmin - 避免在媒体查询里写
vh/vw—— Wear OS 旧版本和部分定制 ROM 对滚动中视口重算支持不一致，容易闪动
慎用 pointer-events: none，手表触控容错率极低
有人给遮罩层加 pointer-events: none 想透传点击到底层按钮，结果在手表上完全点不动。这不是 bug，是硬件限制：手表触控采样率低、坐标抖动大，系统对连续 touchstart 事件的时间/位置偏移容忍度远低于手机，透传后坐标失准直接丢弃事件。
替代方案更实在：
- 遮罩层保留
pointer-events: auto，靠z-index控制层级 - 需要扩大点击区域时，用
padding或margin扩展热区，比如padding: 6vmin - 绝对不要在
position: fixed元素上设pointer-events: none—— 部分 Wear OS 4.x 版本会忽略该声明
字体回退链必须精简，系统字体栈优先级高于 @font-face
手表端网络不稳定、资源加载慢，@font-face 加载失败后，系统回退行为不可控：有些设备回退到超细无衬线体（font-weight: 100），文字几乎隐形；有些则强行用等宽字体撑开行高，破坏布局。
保底策略就是放弃自定义字体：
- 直接用系统默认栈：
font-family: -apple-system, system-ui, sans-serif - 显式指定
font-weight: 600，避免 Thin / Light 字重被默认选中 - 禁用
font-smooth和-webkit-font-smoothing，这些属性在小字号下反而造成边缘模糊
真正难处理的不是怎么写媒体查询，而是手表上连 1px solid 边框都可能因像素密度和渲染策略差异变得时隐时现——得靠真机反复测，模拟器只能看布局结构，看不出触控反馈和字体渲染实感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
