细解鸿蒙之元服务UX上架标准-横竖屏适配
是否必须遵守:必须
标准项描述:
在应用程序的开发过程中,横竖屏适配检查是一项重要的任务,旨在确保应用在不同屏幕方向(横屏和竖屏)下都能正常显示和功能。
横竖屏适配检查的具体内容
-
布局调整
-
•
屏幕尺寸和比例:不同设备的屏幕尺寸和比例各不相同,横竖屏切换时屏幕尺寸会发生变化。适配检查需要确保应用在不同屏幕尺寸和比例下都能合理布局。例如,在竖屏模式下,屏幕高度相对较大,宽度相对较小;而在横屏模式下,屏幕宽度增大,高度减小。应用需要根据这些变化调整布局,保证界面元素的显示效果。
-
•
组件位置和排列:屏幕方向改变时,组件的位置和排列也会发生变化。例如,在竖屏模式下,某些组件可能会垂直排列;而在横屏模式下,组件可能会水平排列。适配检查要确保组件在横竖屏切换时能够正确地重新排列,避免出现重叠、遮挡或不合理的布局。
-
•
页面内容展示:应用的页面内容在横竖屏切换时需要适应不同的屏幕空间。例如,在竖屏模式下,页面内容可能会上下滚动;而在横屏模式下,内容可能会以左右滑动或分栏的方式展示。适配检查要保证页面内容在横竖屏切换时能够完整、清晰地展示,并且符合用户的操作习惯。
-
-
视觉效果
-
•
图像和图标:横竖屏切换时,图像和图标可能需要重新调整大小、比例或显示方式。例如,在竖屏模式下,图片可能会以竖排方式显示;而在横屏模式下,图片可能会以横排或适应屏幕宽度的方式显示。适配检查要确保图像和图标在横竖屏切换时能够保持清晰、美观,并且与整体界面风格一致。
-
•
文字排版:文字的排版也会受到横竖屏切换的影响。例如,在竖屏模式下,文字可能会以竖排方式显示;而在横屏模式下,文字可能会以横排或适应屏幕宽度的方式排列。适配检查要保证文字在横竖屏切换时能够正确地排版,避免出现文字重叠、换行或难以阅读的情况。
-
•
色彩和对比度:横竖屏切换时,屏幕的色彩和对比度可能会发生变化。适配检查需要确保应用在不同屏幕方向下都能保持良好的视觉效果,例如,在竖屏模式下,色彩可能会更加鲜艳;而在横屏模式下,色彩可能会更加柔和。适配检查要保证色彩和对比度在横竖屏切换时能够合理调整,以提供舒适的视觉体验。
-
-
功能操作
-
•
触摸操作:横竖屏切换时,触摸操作的方式可能会发生变化。例如,在竖屏模式下,用户可能会通过上下滑动屏幕来浏览内容;而在横屏模式下,用户可能会通过左右滑动屏幕来操作。适配检查要确保触摸操作在横竖屏切换时能够正常响应,并且符合用户的操作习惯。
-
•
手势操作:手势操作也可能会受到横竖屏切换的影响。例如,在竖屏模式下,用户可能会使用双指缩放来放大图片;而在横屏模式下,用户可能会使用单指滑动来切换页面。适配检查要确保手势操作在横竖屏切换时能够正确识别和响应,并且提供一致的操作体验。
-
•
设备功能:一些设备可能具有特定的功能,如重力感应、旋转屏幕等。适配检查需要确保应用在横竖屏切换时能够正确地利用这些设备功能,例如,当设备旋转屏幕时,应用能够自动调整屏幕方向,并且保持正常的功能。
-
-
兼容性
-
•
操作系统版本:不同操作系统版本对横竖屏切换的支持方式可能不同。适配检查需要确保应用在不同操作系统版本下都能正常运行,并且能够适应操作系统的特性。例如,某些操作系统可能在横竖屏切换时会自动调整应用的布局和显示方式,应用需要根据这些特性进行适配。
-
•
设备类型:不同设备类型(如手机、平板电脑、电脑等)对横竖屏切换的支持方式也有所不同。适配检查需要确保应用在不同设备类型上都能正常显示和功能,并且能够适应设备的特点。例如,手机和平电脑的屏幕尺寸和分辨率差异较大,应用需要根据设备类型进行适配。
-
•
浏览器兼容性:如果应用在浏览器中运行,适配检查还需要考虑浏览器的兼容性。不同浏览器对横竖屏切换的支持方式可能不同,应用需要确保在各种浏览器上都能正常显示和功能。
-
横竖屏适配检查的意义
1 提高用户体验:适配横竖屏切换能够使应用在不同屏幕方向下都能提供良好的用户体验。用户可以根据自己的需求和习惯选择横竖屏模式,并且在切换屏幕方向时能够保持流畅、舒适的操作。
2 扩大应用的适用范围:适配横竖屏切换可以使应用在更多设备上运行,扩大应用的适用范围。无论是在手机、平板电脑还是电脑上,用户都能够享受到应用的功能和服务。
3 增强应用的竞争力:适配横竖屏切换能够提高应用的质量和性能,增强应用的竞争力。用户更愿意使用能够在不同屏幕方向下正常显示和功能的应用,因此适配横竖屏切换可以吸引更多用户。
4 满足用户需求:适配横竖屏切换能够满足用户对不同屏幕方向的需求。例如,用户在观看视频、玩游戏等场景下可能更喜欢横屏模式,而在阅读、浏览网页等场景下可能更喜欢竖屏模式。适配检查可以提供更好的用户体验,满足用户的需求。
--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown
配置module.json5的orientation字段
此字段配置的是应用启动时的窗口显示状态,对于开屏时就需要以默认的横屏或者竖屏方式显示,需要在此字段进行相应的配置:
{
"module": {
// ...
"abilities": [
{
"name": "EntryAbility",
// ...
"orientation": "portrait"
}
]
}
}
其支持的参数可以参考module.json5配置项中orientation字段相关配置的orientation字段说明:
根据应用默认的旋转行为进行相应的配置:
如果应用是竖屏应用,建议配置portrait为默认旋转策略。
如果应用是横屏应用,例如游戏类应用,进入游戏时,默认就是横屏,此时有两种情况:
一、仅支持横屏,建议配置landscape为默认旋转策略。
二、支持在横屏和反向横屏中切换,建议设置为auto_rotation_landscape。
如果应用为可旋转应用,建议应用配置auto_rotation_restricted为默认旋转策略。
如果一个应用,在直板机和折叠机折叠态是竖屏应用,在平板和折叠机展开态默认是可旋转应用,推荐配置follow_desktop为默认旋转策略。
PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~