apple watch 和 wear os 适配需强制 viewport 为 ，仅用 max-width 媒体查询（如 @media (max-width: 240px)），配合 min-height、orientation 及 vmin 精准控制布局与字体。
viewport 必须写死 user-scalable=no
Apple Watch 和 Wear OS 默认启用 pinch-to-zoom，哪怕用户没做任何手势，系统也会为“可读性”自动缩放布局。一旦缩放发生，max-width 媒体查询就完全失效——你写的 @media (max-width: 200px) 可能永远不触发。
-
width=device-width是基础，但它只告诉浏览器“别瞎猜视口宽度”，不是为了适配 -
initial-scale=1.0必须显式写出，不能省略或设为其他值 -
user-scalable=no是关键，漏掉它，所有断点都不可靠 - 完整写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - 不要用
maximum-scale或minimum-scale替代user-scalable=no，后者在 watchOS Safari 中更稳定
用 max-width，别碰 max-device-width
max-device-width 在现代手表浏览器中基本失效：watchOS Safari 和 Wear OS Chrome 都会忽略它，或返回桌面级数值（比如 1024px）。原因很实在——设备像素比高、UA 欺骗普遍、CSS 规范早已不推荐依赖该特性。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 实际生效的是
max-width，但前提是上面的viewport已正确设置 - 手表逻辑视口宽度集中在
120px～240px区间（Galaxy Watch6 圆形屏约176px，Apple Watch Series 9 45mm 约204px） - 从
@media (max-width: 240px)开始切，而不是@media (max-device-width: 240px) - 不要用
device-pixel-ratio做主判断依据：watchOS Safari 不支持该媒体特性，Samsung Tizen 实现也不一致
断点优先响应 height 和 orientation
手表屏幕高度常小于宽度（尤其圆形表盘是正方形裁切），仅靠 max-width 会漏掉大量真实场景。横竖屏切换频繁，且系统级辅助功能（如“放大文本”）会动态压缩视口高度。
- 必须覆盖：
@media (max-height: 320px)（小方屏）、@media (min-height: 400px)（长条形表带屏） - 区分方向：
@media (orientation: landscape)和@media (orientation: portrait)，尤其对图表、列表组件影响显著 - 避免嵌套媒体查询：
@media (min-width: 180px) { @media (orientation: portrait) { ... } }在旧版 Tizen WebView 中直接失效 - 不要写
@media (min-width: 120px) and (max-width: 240px)这种宽泛区间，容易被系统缩放干扰；改用窄范围微调，比如@media (min-width: 180px) and (max-width: 192px)
字体、点击区与布局的硬约束
px 单位在手表上几乎不可靠——系统强制缩放、抗锯齿策略、辅助字体设置都会干扰渲染。直接写 font-size: 12px 可能被拉到 18px 或截断。
- 根字号优先用
rem：html { font-size: 10px; }，再用媒体查询微调（如@media (max-width: 200px) { html { font-size: 9px; } }） - 点击区域必须满足最小触控建议：
min-height: 44px和min-width: 44px，这是 watchOS 和 iOS 的硬性要求 - Flex 容器务必加
flex-wrap: wrap，否则单行内容撑爆视口；Grid 推荐grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))) - 所有图片/图标必须设
max-width: 100%和height: auto，否则在144x144圆形屏上会拉伸变形 -
aspect-ratio、:has()、scroll-snap等特性在 watchOS Safari 中全部无效，别写
复杂点在于：手表没有“默认安全区”，哪怕一个 padding: 4px 写错位置，都可能让按钮被圆角裁掉。最稳的做法不是穷举所有型号，而是用 vmin 控制基础尺寸，再靠 min-width + max-height 组合断点做窄域修正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
