“手机用单栏、平板用双栏”看似合理，但 2in1 的自由窗口可以比平板窄，折叠屏展开后也可能比某些桌面窗口宽。听见课堂不把 deviceType 当布局真相，而是读取根容器真实宽度，用 840vp 决定当前采用 large 还是 compact 外壳。

一、设备类型无法描述当前可用空间

硬件标签通常在启动时确定，窗口宽度却会持续变化。用户可以拖动 2in1 窗口、分屏或改变方向，布局如果只在首次启动判断一次，就会保留错误列数和旧滚动区域。

响应式的输入应该是“此刻可用多少空间”，而不是“设备大概属于什么类别”。

二、根容器是最可靠的测量入口

项目在最外层 Stack 监听 onAreaChange，把新宽度转换为数字，再更新 isLarge。

.onAreaChange((oldValue, newValue) => {
  const width = Number(newValue.width);
  this.isLarge = width >= AppSizes.LARGE_BREAKPOINT;
})

因为测量发生在实际布局容器，它自然包含分屏和自由窗口结果。

三、840vp 是当前设计契约

AppSizes.LARGE_BREAKPOINT=840 表示：达到这个宽度后，侧栏、顶栏与大屏工作区有足够空间；低于它则使用更紧凑的页面壳。

它不是 HarmonyOS 官方设备分类，也不是永远正确的行业常量。若字体、侧栏宽度或信息架构变化，断点应重新用内容压力测试确定。

四、large 分支改变的是页面骨架

大屏分支使用 Row：左侧是 sideNavigation()，右侧是顶栏和可滚动内容区；内容区左右各 28vp、顶部 24vp，并留出 30vp 底部空间。

这不是把手机页面放大，而是改变导航位置、内容宽度和信息组织方式。

五、compact 分支保留手机式纵向结构

低于 840vp 时，页面采用顶栏、主 Scroll 和固定底栏的纵向结构，左右边距来自 PHONE_PAGE_PADDING。约 835vp 的窗口会落入 compact 外壳，这正是断点边界验收必须覆盖的情况。

如果 compact 内容在 835vp 显得过宽，可在组件内部增加最大宽度或中间断点，而不是把整个设备强行归类为 large。

六、沉浸页还需要第三种判断

手机实时课堂、扫描和 OCR 复核会临时隐藏通用顶栏与底栏，直接显示沉浸式页面。这个分支同时依赖 !isLarge 与当前 RouteId。

响应式不仅是列数变化，还包括页面壳是否存在。规则必须集中，否则某个沉浸页可能忘记恢复返回入口。

七、组件级响应式比无限增加全局断点更稳

全局断点决定导航骨架，卡片内部可以根据自身宽度决定两列、三列或纵向排列。这样侧栏宽度变化不会迫使所有组件共享同一套阈值。

未来若引入 600vp 中间断点，应先找出确实需要重排的组件，而不是复制整套页面。

八、宽度变化时要复位短生命周期状态

布局切换可能保留滚动偏移、弹窗位置或选中卡片。项目的 navigate() 会在路由变化时把内容 Scroller 移到顶部；窗口往返还需要验证当前页是否因旧几何产生裁切。

响应式正确不仅是“没崩”，还包括用户能继续找到操作区和当前上下文。

九、1100→835→1100 比三个独立截图更有价值

三个冷启动截图只能证明三个静态状态。连续往返能暴露缓存宽度、旧滚动偏移、背景衰减边界和固定操作区没有重新布局的问题。

听见课堂的大屏验收因此记录了宽到中等再回宽的真实过程，而不是只看首次打开。

十、文字缩放会改变断点压力

同样 840vp，在系统字体放大后可容纳的信息更少。断点应和长标题、中文按钮、1.5 倍字体、高对比边框一起评估。

当前项目已验证应用内字幕字号，但系统 1.5 倍字体尚未完成全页运行证据，因此不能声称断点已覆盖所有放大场景。

十一、方向和设备仍然有辅助价值

真实宽度决定布局骨架，但方向、输入方式和设备能力仍可决定相机预览、键盘快捷键或性能降级。不要从“宽度优先”推导出“设备信息完全无用”。

正确做法是每种信号只负责自己的问题：宽度管空间，能力探测管系统功能，输入模式管交互增强。

十二、总结

840vp 是从当前内容和导航宽度推导出的工程断点，不是设备名称。根容器 onAreaChange 让应用跟随真实窗口，large 与 compact 分支负责不同骨架，组件再做局部重排。

下一篇继续看导航：同一个 RouteId 如何同时驱动手机五项底栏、大屏侧栏和三个沉浸式页面。