# 多屏适配
# 为什么要做多屏适配?
小米可穿戴设备(手环、手表)众多,设备间屏幕形状、尺寸和分辨率存在差异,为了保证应用在不同屏幕上都能正常显示,需要进行多屏适配。 建议开发者在开发应用时尽量考虑多屏适配,提高应用的通用性,以保证应用能分发到尽量多的可穿戴设备上,帮助开发者快速拓展用户。 以下表格是搭载 Vela OS 的设备屏幕详细信息,请参考。
设备类型 | 设备型号 | 屏幕形状 | 屏幕尺寸 | 分辨率 | PPI | 屏幕宽度DP | 长宽比 |
---|---|---|---|---|---|---|---|
手表 | Xiaomi Watch S1 Pro | 圆形 | 1.47英寸 | 480x480 | 326 | 240 | 1 |
手表 | Xiaomi Watch H1 | 圆形 | 1.43英寸 | 466x466 | 326 | 233 | 1 |
手表 | Xiaomi Watch S3 | 圆形 | 1.43英寸 | 466x466 | 326 | 233 | 1 |
手表 | Xiaomi Watch S4 sport | 圆形 | 1.43英寸 | 466x466 | 326 | 233 | 1 |
手表 | Xiaomi Watch S4 | 圆形 | 1.43英寸 | 466x466 | 326 | 233 | 1 |
手表 | REDMI Watch 5 | 矩形 | 2.07英寸 | 432x514 | 324 | 216 | 0.8 |
手环 | 小米手环8 Pro | 矩形 | 1.74英寸 | 336x480 | 336 | 168 | 0.7 |
手环 | 小米手环9 | 跑道型胶囊屏 | 1.62英寸 | 192x490 | 325 | 96 | 0.4 |
手环 | 小米手环9 Pro | 矩形 | 1.74英寸 | 336x480 | 325 | 160 | 0.7 |
# 如何做多屏适配?
多屏适配的前提是应用需要进行多屏设计,设计稿需要包含不同屏幕的适配方案,具体设计方法请参考 多屏设计。
框架提供了一系列技术规范,帮助开发者按照设计稿完成应用的多屏适配,请参考 多屏规范。
我们的 IDE 也提供了多屏 UI 模拟器,帮助开发者快速预览应用在不同屏幕上的效果,以便进行适当调整,请参考 多屏 UI 模拟器。
我们提供了一些对常见页面元素进行多屏适配的代码示例以及整站案例供参考,代码示例。