uniapp适配折叠屏产品

208 阅读2分钟

文档适用折叠屏产品中APP相关的设计,开发,测试人员等。

关于通用软件,可能存在如下形态,即:

  • 展开态,全屏点亮工作。
  • 折叠主屏态:折叠态,主屏工作。
  • 折叠副屏态:折叠态:副屏工作。

动态适配需求规格描述

说明:

(1)任意形态下打开一个应用,满足以上静态显示规格

(2)当用户物理形态切换时,应用需要做到不重启应用,并自动在新的设备形态下按照静态规格布局。

即:在用户进行展开,折叠等操作, 应用任务不中断,自动适应各种屏幕下的静态布局规格。

适配方案

方案一 X轴方向自适应

  • 说明: 即,尽量保持Y轴方向上元素不变,X轴方向上自适应。
  • 范围(推荐性):适用于界面元素相对单一,没有大量列表类、或较多显示元素的页面。

方案二 布局内容扩展

  • 说明:参考pad布局显示更多内容,对于区分了手机和pad布局的应用,在展开态优先考虑参考pad的大屏布局适配展开态界面,显示更多内容;尽量保证Y轴方向元素的不变。
  • 范围(推荐性):一般适用于WEB类应用,页面特征一般为元素多,适配原则以尽量显示较多元素优先。

方案三 分栏布局

  • 说明:对于设计过分栏能力的模块,需要在展开态体现分栏布局。
  • 范围:一般有明显list二级菜单的元素结构比较适合。

方案四 横竖屏布局一致

  • 说明:考虑到展开态8:7.1的比例,展开态的横屏和竖屏建议一套布局。横竖一致;不对展开态的横屏特殊处理,挪移布局不用体现。

强烈建议应用支持可变比例显示(resizeable),在可预见的屏幕比例范围内,都可以做到良好适配。且在比例切换时,应用能够自己处理 screenSize 变化,不需要重走生命周期。总结来说,即要求应用无论静态还是场景切换下都可以完全支持自适应布局。

应用适配折叠屏需要做“屏幕比例适配”和“切换显示比例应用不重启适配”。

技术

  1. 媒体查询
  2. 使用一套通用的 布局

注意:不要使用5+APP中检测屏幕的方法,这个api会重启应用

不过可 5+APP 中检测屏幕的方法可以局部使用