屏幕适配是一个复杂而重要的议题，它直接影响到用户体验和应用的一致性。在进行屏幕适配设计时，可以从以下几个方面进行深入分析：
1. 设备兼容性当不同类型的设备（如不同尺寸和分辨率的屏幕）使用同一款应用时，我们需要决定是为每种设备类型单独设计一套界面，还是使用一套灵活的响应式和自适应设计方案来适配所有设备类型。这种决策将直接影响到开发成本和用户体验的一致性。
2. 视觉体验随着手机屏幕尺寸的增大，用户期望的视觉效果也会有所不同。我们需要确定，当屏幕变大时，内容是随着屏幕大小而放大，还是保持原有尺寸，从而在更大的屏幕上展示更多的内容。这种选择将影响到应用的易读性和信息密度。此外，用户往往会根据个人偏好调整手机的字体大小。在这种情况下，我们需要考虑，当用户更改了手机上的字体大小设置时，应用程序内的文本是否也应该相应调整，以提供更好的阅读体验，还是保持不变，以确保界面设计的一致性。
一、设备兼容性
1、如何查看设备类型的展示效果？
新建工程时，可以在 Device type 中勾选当前应用支持的设备类型，这会影响后续预览器的显示。
开发工具 DevEco Studio 右侧边的 Previewer -> 右上角更多 -> Multi-profile preview 可以查看多屏效果。
• Phone: 手机（预览器包含 Foldable(large) 表示可折叠的大屏设备）
• Tablet: 平板电脑
• 2in1: 华为平板 2 合 1
• Car: 车载设备
2、如何代码获取设备类型？
注意：以下代码只有在真机上才生效，预览器中不生效。
import { promptAction, window } from '@kit.ArkUI'import { resourceManager } from '@kit.LocalizationKit' @Entry@Componentstruct Page41 { build() { Column({ space: 5 }) { Button('设置当前app以横屏方式显示').onClick(() => { window.getLastWindow(getContext()).then((windowClass) => { windowClass.setPreferredOrientation(window.Orientation.PORTRAIT) }) }) Button('设置当前app以竖屏方式显示').onClick(() => { window.getLastWindow(getContext()).then((windowClass) => { windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE) }) }) Button('判断APP是横屏还是竖屏').onClick(() => { promptAction.showToast({ message: getContext().resourceManager.getConfigurationSync().direction === resourceManager.Direction.DIRECTION_VERTICAL ? "竖屏" : "横屏" }) }) Button('获取当前设备类型').onClick(() => { promptAction.showToast({ message: this.getDeviceTypeInfo() }) }) } .height('100%') .width('100%') } getDeviceTypeInfo(): string { let deviceType = getContext().resourceManager.getDeviceCapabilitySync().deviceType; switch (deviceType) { case resourceManager.DeviceType.DEVICE_TYPE_PHONE: return "手机"; case resourceManager.DeviceType.DEVICE_TYPE_TABLET: return "平板"; case resourceManager.DeviceType.DEVICE_TYPE_PC: return "电脑"; case resourceManager.DeviceType.DEVICE_TYPE_TV: return "电视"; case resourceManager.DeviceType.DEVICE_TYPE_CAR: return "汽车"; case resourceManager.DeviceType.DEVICE_TYPE_WEARABLE: return "穿戴"; case resourceManager.DeviceType.DEVICE_TYPE_2IN1: return "2IN1"; default: return "未知" } }}
复制代码
3、如何适配设备类型？
3.1、响应式布局
当窗口尺寸变化较大时，仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题，此时就需要借助响应式布局能力调整页面结构。
参考官方文档：文档中心
3.2、自适应布局
可通过拉伸、均分、占比、缩放、延申、隐藏、折行等方法单独或组合使用。
参考官方文档：文档中心
二、视觉体验
参考官方文档【像素单位】：文档中心
1、何时使用 fp ？
类似于 Android 的 sp，会随着系统字体大小设置变化。
2、何时使用 lpx？【我实际开发中基本都是用的 lpx】
类似于微信小程序的 rpx，区别是小程序 designWidth 默认是 750 且不可修改，而鸿蒙的 designWidth 默认是 720 但可以修改。通常用于底部四个按钮、页面整体布局等需要等比缩放的情况。在鸿蒙应用中，可以使用 lpx 单位来进行屏幕适配。通过设置 designWidth，开发者可以使用 lpx2px 和 px2lpx 等方法来进行单位转换，从而实现屏幕适配。
3、何时使用 vp ？
类似于 Android 的 dp，通常用于隐私协议内容、商品详情等大量文字显示的场景。
4、何时使用 px ？
一般在使用 canvas 绘制时需要绝对尺寸的情况下使用。实际上，不管是 lpx 还是 vp，最终都会以各种计算方式转换为 px。
评论