deviceTypes 不是适配完成证明

项目配置：

{
  "deviceTypes": [
    "phone",
    "tablet",
    "2in1"
  ]
}

它告诉系统模块面向哪些设备类型，但不会自动解决：

• 平板上单列内容过宽；
• 2in1 上底部 Tab 离鼠标太远；
• 横屏月历和历史列表空间浪费；
• 键盘无法操作图标按钮；
• 弹窗在大屏上铺满；
• 字体放大后布局溢出。

因此文档中应明确区分：

已声明设备类型
≠
已完成目标设备视觉和交互验收

一、适配应该看窗口宽度，不只看设备名称

同一台平板可能处于：

• 全屏；
• 分屏；
• 横屏；
• 竖屏；
• 自由窗口。

2in1 也可能把窗口缩得很窄。

因此响应式布局的主要输入应该是当前窗口尺寸或断点，而不是简单判断“是不是 tablet”。

可以建立：

sm：窄窗口，单列、底部导航
md：中等窗口，限制内容宽度
lg：宽窗口，双列或侧边导航

具体数值应根据设计和官方断点能力确定，不要从某一台测试设备的物理分辨率硬编码。

二、先给内容设置最大可读宽度

手机页面常见：

Column() {
  // 内容
}
.width('100%')

直接搬到 2in1 全屏后，一句话日记输入框和设置卡片可能横跨整个屏幕，阅读距离过长。

最小成本的第一步是：

外层占满窗口
→ 内层内容设置 maxWidth
→ 大屏居中

示意：

Row() {
  Column() {
    // 页面主体
  }
  .width('100%')
  .constraintSize({ maxWidth: 720 })
}
.width('100%')
.justifyContent(FlexAlign.Center)

即使暂时不做双栏，也能避免手机布局被机械拉伸。

三、导航在宽屏上可以从底部变成侧边

五个主入口：

今日、历史、统计、习惯、设置

手机上底部 Tabs 很自然；宽屏上可以考虑侧边导航：

断点	导航建议
sm	底部 Tab
md	底部 Tab 或窄侧栏
lg	左侧垂直导航

侧栏优势：

• 更接近键鼠用户视线和操作区域；
• 释放垂直空间；
• 适合显示图标和完整文字；
• 后续可扩展当前页面二级入口。

但不要为平板和 2in1 复制一套完全独立页面。优先复用同一 Feature，只调整容器和导航布局。

四、哪些页面适合双栏

不是所有页面都应该把空白填满。

今日页

可以左侧记录心情与标签，右侧放一句话日记和今日习惯；也可以保持中等宽度单列，强调专注。

历史页

非常适合：

左侧月历/日期列表
右侧当天详情与编辑

手机仍使用弹层或页面跳转。

统计页

复盘卡片和分布可以组成两列网格，但每张卡片仍要有合理最小宽度。

习惯页

左侧正在打卡，右侧归档列表或编辑详情。

设置页

官方“一多”案例常见小屏单栏、大屏左侧分类和右侧详情。当前设置项较少时也可以保持居中单列，避免为了双栏制造空页面。

适配目标是提升任务效率，不是让每一寸屏幕都塞满组件。

五、月历需要稳定单元尺寸

手机月历通常使用七列等分：

7 × 日期单元

在大屏上如果继续无限拉伸，每个日期格会变得非常宽，心情图标和打卡数字却仍然很小。

可以：

• 为月历设置最大宽度；
• 保持单元接近正方形；
• 大屏把日期详情放到右栏；
• 不单纯放大所有字体；
• 确保月切换按钮支持键盘焦点。

六、弹窗宽度不能跟随整个窗口

习惯编辑、删除确认和历史编辑在手机上可以接近全宽，但在 2in1 上不应成为一条横跨屏幕的长条。

建议：

• 设置最大宽度；
• 大屏保持居中；
• 表单标签和控件可以双列；
• 删除确认仍保持紧凑；
• 键盘 Tab 顺序符合视觉顺序；
• Escape/返回行为一致。

七、2in1 不只是更大的触屏设备

2in1 用户可能使用：

• 鼠标；
• 触控板；
• 物理键盘；
• 触屏；
• 多窗口。

因此要检查：

• Hover 状态是否清楚；
• 图标按钮是否有可点击区域；
• Tab 键能否访问主要操作；
• 焦点样式是否可见；
• Enter/Space 能否激活按钮；
• 文本输入后焦点流转是否合理；
• 滚轮能否滚动长页面；
• 右键不会触发异常状态。

仅用手指在模拟器窗口里点击，无法覆盖这些交互。

八、系统能力也要按设备验证

项目使用：

• UserAuthenticationKit；
• DocumentViewPicker；
• 系统浏览器与邮件 Want；
• 应用内语言重启。

不同设备形态上的系统 UI 和可用认证方式可能不同。

例如 2in1 不一定具备与手机相同的人脸/指纹硬件，但可能支持 PIN。应用锁配置了多种认证类型后，仍要验证系统实际返回和取消路径。

文件保存器在宽屏上的窗口行为、键盘操作和 URI 写入也需要真机或目标设备测试。

九、大字体和长翻译是另一种“宽度断点”

中英日文案长度不同，系统字体放大后，原本在手机上刚好一行的按钮可能换成两行。

适配测试应组合：

窄窗口 + 大字体 + 英文长文案
宽窗口 + 日文 + 键盘焦点

不能只在默认中文字号下判断布局完成。

需要关注：

• 底部 Tab 文字是否截断；
• 语言选择项是否完整；
• 隐私告知按钮是否仍可点击；
• 统计卡片标题是否遮挡数字；
• 删除确认文案能否完整滚动。

十、响应式实现的渐进顺序

阶段 1：防止拉伸

• 主内容 maxWidth；
• 弹窗 maxWidth；
• 月历 maxWidth；
• 大屏居中。

阶段 2：断点布局

• sm 单列；
• md 优化间距；
• lg 双栏。

阶段 3：导航变化

• 底部 Tabs；
• 宽屏侧栏。

阶段 4：输入方式

• 键盘焦点；
• Hover；
• 鼠标和滚轮。

阶段 5：专项体验

• 分屏；
• 窗口动态缩放；
• 横竖屏切换；
• 状态保持。

这种顺序能先解决最明显的问题，再逐步利用大屏优势。

十一、建议建立设备 QA 矩阵

维度	最低覆盖
设备	phone、tablet、2in1
窗口	窄、中、宽
方向	竖屏、横屏
输入	触屏、鼠标、键盘
字体	默认、放大
语言	中文、英文、日文
主题	浅色、深色
生命周期	冷启动、后台恢复、窗口缩放

不必测试所有笛卡尔积，但高风险组合必须覆盖。

例如：

• phone + 大字体 + 英文；
• tablet 横屏 + 日文；
• 2in1 宽窗口 + 键盘；
• 2in1 窄分屏 + 应用锁；
• tablet + 系统文件保存器。

十二、如何描述当前适配状态才准确

如果代码只声明设备类型，商店或技术文章应写：

已声明支持 phone/tablet/2in1，
宽屏视觉与交互仍需目标设备专项验收。

不要写“完美适配所有鸿蒙设备”。

透明地记录“已实现、已模拟器验证、待真机验证”，能够降低发布风险，也让后续维护者知道下一步在哪里。

总结

HarmonyOS 多设备适配至少包含：

1. 以窗口断点而非设备名称驱动布局；
2. 先限制内容和弹窗最大宽度；
3. 宽屏选择真正有价值的双栏页面；
4. 底部导航可演进为侧边导航；
5. 2in1 必须覆盖键鼠和焦点；
6. 系统认证、Picker 等能力按设备验证；
7. 大字体和长翻译纳入测试；
8. 声明支持与完成验收分开记录。

“一次开发，多端部署”意味着最大限度复用业务与 Feature，不意味着同一个手机布局可以不经设计地铺到所有窗口。

本文结合“心晴手记（MoodMemoir）”HarmonyOS 版当前设备声明与宽屏验收计划整理。

参考资料

• HarmonyOS 一多开发
• 一多设置典型页面
• HarmonyOS 一多开发实例

---