应使用 max-width 而非 max-device-width，因后者在现代手表浏览器中基本失效；需配合 viewport 元标签，并基于 120px–240px 视口宽度编写媒体查询。
media query 里用 max-width 还是 max-device-width？
max-device-width 在现代手表（尤其是 Wear OS 和 watchOS）上基本失效，浏览器会忽略它或返回桌面值。原因很简单：设备像素比高、UA 欺骗普遍、且 CSS 规范已明确不推荐依赖设备宽度。实际生效的是 max-width，但必须配合 viewport 元标签的正确设置。
- 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且未被覆盖 - 手表典型逻辑视口宽度在
120px–240px范围，可从@media (max-width: 240px)开始切 - 不要用
device-pixel-ratio做主要判断依据，不同厂商实现差异大，且 watchOS Safari 不支持该媒体特性
字体和点击区域为什么总是太小？
CSS 的 px 在手表上几乎不可靠——系统强制缩放、字体抗锯齿策略、甚至系统辅助功能（如“更大字体”）都会干扰渲染。直接设 font-size: 12px 可能最终显示为 18px 或根本被截断。
- 优先用
rem或em，根字号设为10px或12px，再通过媒体查询微调html { font-size: ... } - 点击区域至少保证
min-height: 44px和min-width: 44px，这是 iOS/watchOS 的最小触控建议值 - 避免
line-height: 1，手表行距过紧极易误操作；line-height: 1.3更稳妥 - 示例：
@media (max-width: 200px) {<br> html { font-size: 9px; }<br> button { min-height: 44px; min-width: 44px; padding: 8px; }<br>}
Flexbox 和 Grid 在手表上表现不稳定？
不是不稳定，而是默认行为在极窄容器下容易崩：Flex 项不换行、Grid 列坍缩为 0、auto 尺寸计算失准。手表屏幕没有“安全内边距”，内容稍一溢出就会触发横向滚动或裁剪。
- Flex 容器必须显式加
flex-wrap: wrap，否则单行撑爆 - Grid 推荐用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))))，避免固定列数 - 禁用
overflow: hidden除非你确认所有内容都适配了 160px 宽度；更安全的是overflow-x: visible+white-space: nowrap控制文本 - 所有图片/图标必须设
max-width: 100%和height: auto，否则在144x144圆形屏上会拉伸变形
watchOS Safari 对 CSS 特性支持有多弱？
它基于旧版 WebKit，不支持很多“理所当然”的特性。比如 aspect-ratio、inset、:has()、scroll-snap 全部无效；backdrop-filter 会直接降级为透明背景；动画帧率常卡在 30fps 以下。
立即学习“前端免费学习笔记（深入）”；
- 查兼容性只看 caniuse 中 “Safari iOS” 列，再往左推一到两个版本（watchOS Safari ≈ iOS 15 Safari）
- 动画优先用
transform和opacity，禁用left/top位移 - 阴影用
box-shadow: 0 1px 2px rgba(0,0,0,.2)，别碰filter: drop-shadow - 如果用了
@supports，记得 fallback 必须可用，不能留白
实际调试时，最常被忽略的是系统状态栏高度（env(safe-area-inset-top)）在手表上并不存在——它只在 iPhone 上有效。手表没有“安全区”概念，所有像素都是可用的，硬套 iPhone 适配逻辑反而会导致顶部内容被遮挡。
