本原创文章帖发布在华为开发者联盟社区，欢迎开发者前往访问评论交流，更多与该内容相关讨论，请点击原帖查看：Pura X Max 鸿蒙应用适配：从基础可用性到深度体验优化 TOP 场景优化指引

本篇是《Pura X Max 鸿蒙应用适配攻略合集》的第1篇，旨在帮助开发者高效解决折叠屏设备（如 Pura X Max）应用适配过程中的常见问题。为便于快速定位和解决问题，本文提炼了折叠屏适配中最常见的 TOP 7 场景问题，并提供了对应的解决方案：

	典型场景名称	需要重点关注的应用类别
场景一	小窗口 / 阔折叠内屏下，控件被截断，关键操作不可见或不可点击	登录注册、支付下单、授权确认、表单填写、电商交易、活动报名、设置页、弹窗较多的工具类应用
场景二	软键盘弹出后，输入框或发送 / 确认按钮被遮挡	IM/聊天、评论社区、搜索、登录注册、发布页、问卷表单、客服、内容创作类应用
场景三	调用相机时，画面方向错误、比例异常或预览异常	扫码、拍照、短视频、直播、视频通话、人脸认证、OCR 识别、拍证件/拍照上传类应用
场景四	折叠屏展开后仍沿用小屏布局，信息密度低、留白大	资讯、阅读、电商、社区、办公、内容浏览、详情页、设置页、工作台类应用
场景五	横竖屏 / 全屏切换后，界面不跟随、布局异常或恢复不正确	视频播放、直播、阅读器、地图、游戏、图片浏览、课程学习、沉浸式内容应用
场景六	多次开合或窗口切换后，布局错位、字号图标突变、界面闪动	首页工作台、长列表、阅读器、文档编辑、长流程表单、聊天会话等应用
场景七	展开态或横屏场景下，指南针 / 地图 / AR 等方向指示错误	指南针、地图导航、AR 指引、运动轨迹、体感交互、依赖方向传感器的游戏类应用

针对适配过程中存在的以上问题，您可在下文中找到对应的解决方案，为帮助开发者更高效完成折叠屏等多形态设备适配，建议按下述顺序推进：

1. 先使用直板机分屏能力完成一轮低成本适配自检；
2. 再通过远程真机或模拟器验证折叠态、展开态、内外屏切换等关键形态；

• 远程真机调试：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/redirectToService?menuId=9249519184596051206&type=project
• 模拟器使用指引：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-emulator-create

点击此处获取更多支持与帮助

一、TOP 问题场景优化及解决方案建议

折叠屏设备在屏幕比例、可视区域、交互方式和设备形态上，与直板机存在明显差异。
如果您的应用包含登录、搜索、编辑、拍摄等核心链路，建议重点关注分屏、折叠态 / 展开态、内外屏切换、软键盘弹出、调用摄像头等场景下的显示与交互表现。

此外相较于直板手机，折叠屏设备的使用场景更加多样，应用不仅需要处理折叠态与展开态之间的切换，还需要兼顾横竖屏切换、特殊界面布局以及设备姿态变化带来的适配问题。

以下几类，都是应用在折叠屏适配过程中经常会遇到的典型问题场景。

场景一、小窗口 / 阔折叠内屏下，控件被截断，关键操作不可见或不可点击

以阔折叠内屏场景为例，部分页面在显示区域缩小时，可能出现内容截断、底部按钮不可见、弹窗显示不全等问题，可能影响功能操作体验。

可能原因

• 页面仅按全屏尺寸进行适配，未充分考虑窗口缩小后的布局变化
• 内容区未采用可滚动容器，窗口缩小时无法继续浏览
• 关键按钮、确认区、关闭区被固定在不可见区域
• 弹层、自定义面板未设置合理的尺寸约束，在受限窗口中超出可显示区域

最小适配建议

1. 内容区优先使用可滚动容器或列表类组件，例如 Scroll、List、WaterFlow，让原先不可见的内容可以通过滑动查看；
2. 优先压缩非核心展示区域，保证提交、确认、关闭、下一步等关键操作始终处于可见可点区域；
3. 避免在受限窗口中依赖固定高度、固定宽度布局，优先使用可伸缩、自适应布局；
4. 对弹层、抽屉、半屏页增加尺寸约束，必要时在弹层内部增加滚动能力；

建议优先检查的页面

• 页面存在固定高度布局的组件
• 应用开屏页或隐私协议与授权确认页面

【查看参考文档】：

• Scroll容器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll
• List列表组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list
• WaterFlow容器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow

场景二、软键盘弹出后，输入框或发送 / 确认按钮被遮挡

在阔折叠设备上编辑、评论等输入场景中，软键盘弹出后，输入框、底部操作区、发送按钮或确认按钮被遮挡。

可能原因

• 系统默认避让策略只能优先保证当前输入框不被遮挡，无法自动保证底部操作区始终可见
• 页面内容区没有根据可视区域变化动态收缩
• 页面中存在大量固定高度组件，导致压缩后布局无法自然调整
• 页面缺少软键盘高度监听和可视区域变化处理

最小适配建议

1. 对输入、表单、编辑类页面，可优先评估使用压缩避让模式，并结合页面可伸缩布局及可视区域变化处理。
2. 页面内容区尽量采用可伸缩或自适应高度布局，避免关键区域使用固定高度。

建议优先排查的页面

• 搜索页
• 登录页 / 注册页
• 发布页 / 表单填写页

【查看参考文档】

• 软键盘布局适配：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layout-adapt

场景三、软调用相机时，画面方向错误或预览异常

在折叠屏展开、旋转设备、内外屏切换或切换特殊形态后，相机预览可能出现比例异常、画面颠倒、方向错误等问题。

可能原因

• 折叠状态切换后，仍继续使用切换前的相机设备或预览流
• 仅按“前置 / 后置”固定逻辑选相机，未基于当前形态重新判断可用相机列表
• 预览区域尺寸变化后，预览比例和方向未重新校正
• 页面切换后未对当前相机、方向、预览流进行重建和兜底回退

最小整改建议

1. 在折叠状态、窗口尺寸或设备方向变化后，重新判断当前形态下可用的相机设备；
2. 相机选择不要只按固定“前置 / 后置”逻辑处理，应结合当前设备形态和可用相机列表重新判断；
3. 当切换后原相机不可用时，应自动回退到当前形态下默认可用相机；
4. 重新拉起预览流时，同时校验页面方向、预览比例和预览区域尺寸；
5. 对扫码、拍照、录制、视频通话等相机场景分别验证。

【查看参考文档】

• 相机旋转角度：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/camera-rotation-term
• 适配相机旋转角度：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/camera-rotation-angle-adaptation
• 相机硬件差异：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-camera?utm_source=chatgpt.com

场景四、折叠屏展开后内屏仍沿用小屏布局，界面信息密度和操作效率偏低

以双折叠、三折叠场景为例，应用在展开态界面使用的是放大版的直板机界面，导致部分场景显示内容减少，原本一屏可见的内容，在更大的屏幕上却看不到了。

常见表现
● 大屏下仍是单列信息流，左右大面积留白
● 列表、详情、评论区、相关推荐等内容没有分栏
● 页面元素整体放大，但信息密度没有提升

建议优化方向

1. 避免把大屏适配简单处理为“整体放大”；
2. 按窗口宽度、方向和页面类型进行重排，优先基于断点而不是固定机型做适配；
3. 对首页、频道、列表、详情、设置、阅读等页面，优先评估双栏、多栏或主次分区布局；
4. 可结合分栏布局、重复布局、挪移布局、缩进布局等响应式方式，提高大屏场景下的信息密度和操作效率；
5. 对展开态、方屏、宽屏等不同窗口比例分别验证，避免只是“放大界面”而没有提升展示效率。

【查看参考文档】

页面布局响应式变化-横屏大屏：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-screen-layout#section6493354468

页面布局响应式变化-大屏竖屏：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-screen-layout#section86231545125515

大屏应用UX体验标准：https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-large-screen-0000001807707561

折叠屏应用 UX体验标准：https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-foldable-screen-0000001807866557

页面布局场景：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-page-layout

折叠屏的设计指南：https://developer.huawei.com/consumer/cn/doc/design-guides/foldable-0000002352875141

场景五、横竖屏 / 全屏切换后，界面不跟随、布局异常或恢复不正确

在折叠屏展开使用时，用户调整握持方向后，页面未响应方向变化；或者发生了旋转，但布局错乱、控件错位、字号异常，退出后页面状态恢复不正确。

建议优先排查
● 旋转后页面是否仍然可用，而不只是“能不能转”
● 是否出现黑边、拉伸、控件错位
● 进入全屏、退出全屏、方向切换三条路径是否都正常
● 标题栏、底部操作区、弹层、菜单在旋转后位置是否正确

建议优化方向

1. 把横竖屏 / 全屏切换看成一次完整的窗口变化，而不是单纯的方向变化；
2. 通过窗口尺寸变化能力监听切换过程，及时调整布局、子窗尺寸和关键控件位置；
3. 页面布局优先采用响应式规则，避免旋转后仍沿用切换前的固定尺寸和固定位置；
4. 对全屏进入、全屏退出、方向切换后的状态恢复分别验证，确保阅读位置、播放状态、操作区显示都能正确延续。

【查看参考文档】
窗口方向实践指南：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-direction

横竖屏切换典型问题：https://developer.huawei.com/consumer/cn/doc/architecture-guides/educate-v1_1-ts_c4-0000002313120312

响应式布局：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-responsive-layout

场景六、折叠开合或窗口切换过程中，界面布局错位、字号图标突变

在折叠开合切换、小屏切大屏、大屏切小屏、多窗口恢复全屏等过程中，页面布局错乱，字号、图标、间距、宫格数发生明显突变，影响连续使用体验。

建议优先排查
● 页面是否只在初始化时读取一次窗口信息
● 响应式布局规则和断点切换逻辑是否清晰
● 字号、间距、图标尺寸是否随窗口变化同步调整
● 是否出现整页闪动重建，而非平滑重排

建议优化方向

1. 不要只在页面初始化时取一次窗口参数，应在窗口变化过程中持续响应；
2. 开合连续优先基于统一的响应式断点实现，而不是为每一种折叠状态单独硬编码；
3. 基于窗口尺寸变化和断点刷新 UI，避免仅调整容器尺寸而导致字体等视觉元素在不同形态下表现不一致；
4. 尽量做到平滑重排和状态延续，避免开合后页面跳转、任务中断、整页闪动重建；
5. 对折叠、展开、恢复全屏、多窗口切换等路径分别验证连续性。

【查看参考文档】
开合接续设计指南：https://developer.huawei.com/consumer/cn/doc/design-guides/trifold-0000002352915021#section1333601804219

https://developer.huawei.com/consumer/cn/doc/design-guides/foldable-0000002352875141#section5560057912

适配应用开合连续：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide#section186893019118

场景七、在展开态或横屏场景下，方向类应用可能出现角度偏移或指向错误

在展开态或横屏大屏等默认显示方向发生变化的场景下，指南针、地图朝向、AR指向等依赖方向传感器的应用可能出现方向偏移、指针指向不准、显示角度异常等问题，影响方向判断和使用体验。

可能原因
● 不同设备形态下，屏幕默认方向存在差异，传感器坐标系与屏幕坐标系不一致
● 应用仅按手机竖屏场景处理方向数据，未针对横屏或大屏形态做方向补偿
● 在折叠 / 展开、横竖屏切换等过程中，未根据当前方向重新校正传感器显示结果

最小适配建议

1. 处理方向传感器数据时，结合当前屏幕旋转角度或显示方向，对方向传感器结果做补偿；
2. 不要默认沿用手机竖屏下的方向换算逻辑，应根据横屏、大屏、展开态等场景重新校正显示角度；
3. 对折叠态、展开态、横竖屏切换等路径分别验证方向显示是否正确；

建议优先排查的页面
● 指南针类页面
● 地图导航 / 朝向指示页面
● AR指引类页面
● 依赖方向传感器的运动、游戏类页面

【查看参考文档】

方向偏移或指向错误类问题方案：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_c91-0000002430270561

二、开发者自检走查清单

开发者可以借助直板机应用分屏功能，先检查不同窗口大小下的适配效果；

也可以通过远程真机或真机，查看 Pura X、Mate X 系列、Mate XT 等折叠屏设备上的实际显示效果。

远程真机调试：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/redirectToService?menuId=9249519184596051206&type=project

最小走查清单（建议必查）

1. 首页 / 主页面：检查显示完整性、布局稳定性、功能入口和按钮可达性。
2. 核心链路：检查登录、搜索、支付、发布、播放等关键流程是否存在遮挡、错位或中断。
3. 形态切换：检查折叠态 / 展开态、内外屏切换后，页面是否正常重排，状态是否连续保留。
4. 多窗口 / 分屏：检查缩放、分栏及恢复全屏后，内容和关键操作是否仍可见可点。
5. 横竖屏 / 全屏：检查沉浸场景在方向切换和全屏切换后的布局与恢复状态。
6. 键盘 / 弹窗 / 浮层：检查键盘遮挡、弹窗可操作性以及浮层位置是否正常。

附：官方文档资源

• 折叠屏应用开发：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-foldable-guide
• Pura X阔折叠应用开发：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-purax-guide
• 三折叠应用开发：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-matext-guide
• 多设备界面设计：https://developer.huawei.com/consumer/cn/doc/design-guides/design-principles-0000001957023989
• 多设备开发最佳实践：https://developer.huawei.com/consumer/cn/best-practices/multidevice/
• 多窗口适配：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-multi-device-window-mode
• 软键盘避让：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layout-adapt
• 相机适配与旋转角度适配：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/camera-rotation-angle-adaptation

扫码加入鸿蒙主题交流群，共同交流鸿蒙应用创新与开发