摘要：
本文以鸿蒙历史学习应用《五千年史卷》为例，介绍如何使用 ArkTS 与 ArkUI 构建一套同时适配手机、平板和二合一设备的响应式界面，包括设备声明、断点设计、导航切换、内容宽度控制，以及 API 兼容问题的处理。

一、项目背景

《五千年史卷》是一款中国历史学习应用，提供历史人物、历史事件、朝代脉络、本地搜索、收藏和学习记录等功能。

不同设备的屏幕尺寸差异很大。如果只是把手机界面直接拉伸到平板上，会出现内容过宽、操作距离过长、导航区域利用不足等问题。因此，项目采用 ArkUI 响应式布局，根据可用宽度动态调整界面结构。

二、声明支持的设备类型

首先在 module.json5 中声明应用支持手机、平板和二合一设备：

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

这一步决定应用可以安装到哪些类型的鸿蒙设备，但仅声明设备类型并不会自动完成界面适配，页面仍需根据实际宽度调整布局。

三、设计响应式断点

项目通过页面的 onAreaChange 获取当前可用宽度：

@State viewportWidth: number = 360; private updateViewportWidth(width: string) { let normalized: string = width.replace('vp', '').replace('px', ''); let value: number = Number(normalized); if (value > 0) { this.viewportWidth = value; } }

然后划分两个主要断点：

private isWideScreen(): boolean { return this.viewportWidth >= 840; } private isLargeScreen(): boolean { return this.viewportWidth >= 1200; }

项目当前的布局策略如下：

屏幕宽度	布局策略
小于 840vp	手机布局，底部导航
840vp 至 1199vp	平板布局，侧边导航
大于等于 1200vp	大屏布局，限制正文宽度

断点不需要完全按照设备名称判断。窗口可能被分屏、缩放，因此根据实际可用宽度适配更加可靠。

四、手机与平板采用不同导航结构

手机竖屏空间充足、横向空间有限，因此适合使用底部导航；平板横向空间更宽，则适合使用侧边导航。

build() { Row() { if (this.isWideScreen() && !this.showLocalSearch) { this.SideTabBar() } Stack({ alignContent: Alignment.Bottom }) { Row() { this.PageContent() } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) if (!this.showLocalSearch && !this.isWideScreen()) { this.TabBar() } } .layoutWeight(1) .height('100%') } .width('100%') .height('100%') .onAreaChange((oldValue: Area, newValue: Area) => { this.updateViewportWidth(newValue.width.toString()); }) }

这段代码实现了：

• 手机端显示底部导航栏；
• 平板端显示左侧导航栏；
• 页面主体使用剩余空间；
• 搜索页面打开时隐藏主导航；
• 窗口尺寸变化后自动更新布局。

五、避免大屏内容无限拉伸

平板和二合一设备的屏幕很宽，但阅读型应用不适合让正文铺满整个屏幕。行宽过大会降低阅读效率，因此项目设置了内容最大宽度：

private contentMaxWidth(): number { if (this.isLargeScreen()) { return 1080; } if (this.isWideScreen()) { return 760; } return 10000; }

页面主体统一应用宽度约束：

Column() { this.PageContent() } .width('100%') .height('100%') .constraintSize({ maxWidth: this.contentMaxWidth() })

这样既能使用大屏空间，又能保持较舒适的阅读宽度。

六、处理底部安全空间

手机端存在底部导航，因此滚动页面需要预留更大的底部空间；平板使用侧边导航，不需要相同的底部留白：

private pageBottomPadding(): number { return this.isWideScreen() ? 28 : 86; }

这种动态留白可以防止最后一项内容被底部导航遮挡。

七、API 兼容问题

项目使用 HarmonyOS 6.1 SDK 编译，但测试平板运行的是 API 22，因此配置为：

{ "targetSdkVersion": "6.1.0(23)", "compatibleSdkVersion": "6.0.2(22)", "runtimeOS": "HarmonyOS" }

其中：

• targetSdkVersion 表示应用面向的目标 API；
• compatibleSdkVersion 表示应用允许安装的最低 API；
• 设备 API 必须大于等于 compatibleSdkVersion；
• 应用和设备的 releaseType 也必须匹配。

如果将最低兼容版本错误设置为 API 23，应用就无法安装到 API 22 平板，并会提示 API 与发布类型不匹配。

八、总结

鸿蒙多端适配不只是把界面尺寸放大，而是要根据设备空间重新组织交互结构。《五千年史卷》采用了以下方案：

1. 同时声明手机、平板和二合一设备。
2. 根据实际窗口宽度设置响应式断点。
3. 手机使用底部导航，平板使用侧边导航。
4. 大屏限制正文最大宽度。
5. 根据导航形式动态调整页面留白。
6. 正确配置目标 API 和最低兼容 API。

通过 ArkUI 的声明式布局能力，一套代码即可覆盖多种鸿蒙设备形态。