当前位置:首页 » 小程序开发 » 正文

小米大屏设备适配说明1

1、概述

1.1 小米大屏设备介绍

1.1.1 折叠屏形态与尺寸

折叠屏是一种柔性屏,可以进行弯曲、折叠,比如上下折叠,左右折叠等。

Xiaomi MIX Fold 和 Xiaomi MIX Fold 2 均为左右内折叠设备,其展开状态和折叠状态屏幕大小和分辨率如下:

外屏 内屏
尺寸 分辨率 尺寸 分辨率
Xiaomi MIX Fold 6.52英寸 2520×840 8.01英寸 2480×1860
Xiaoapp开发生成mi MIX Fold 2 6.56英寸 2520×1080 8.02英寸 2160×1914

判断是否为折叠屏设备的接口为:

//可通过反射调用 SystemProperties 的 persist.sys.muiltdisplay_type 属性值来进行判断
boolean isFoldDisplay = SystemProperties.getInt("persist.sys.muiltdisplay_type", 0) == 2;

折叠/展开态的判断接口为:

// 0 UNKNOWN
// 1 折叠
// 2 半折(MIX Fold 2支持)
// 3 展开
final int posture = Settings.Global.getInt(this.getContentResolver(), "device_posture", 0);

1.1.2 平板设备形态与尺寸

小米平板设备屏幕大小和分辨率信息如下:

尺寸 分辨率
小米平板5 11 英寸 2560 x 1600
小米平板5 Pro 11 英寸 2560 x 1600
小米平板5 Pro 5G 11 英寸 2560 x 1600
小米平板5 Pro 12.4 12.4 英寸 2560 x 1600

判断是否为平板设备的接口为:

public static boolean isTablet(){    
/**应用需反射调用*/    
     return SystemProperties.get("ro.build.characteristics").contains("tablet");}

应用也可以动态判断当前窗口显示在大屏下:

public static boolean isTablet(Context context) {    
    return (context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE;}

1.1.3 可扩展性

小米大屏设备品类形态未来将会有更多丰富的产品,因此应用适配后需要支持一定程度拉伸。

1.2 文档适用对象

需要适配小米大屏设备应用的第三方开发者、UX设计师、系统工程师、测试

2、UX设计与软件形态适配建议

2.1 基础体验设计

2.1.1 字体

  • 优先调用系统默认字体来保证整台设备的阅读体验一致性,除非有特殊需求;
  • 排版及字号字重应保证清晰可读;
  • 在折叠屏上,建议保持内外屏字号大小一致,展开大屏字号大小如要放大,最大不能超过外屏小屏的1.2倍。

2.1.2 图片、视频

  • 这些资源不应该出现变形、模糊或者显示不全的问题,影响体验;
  • 在折叠屏上,建议图片、视频等信息内容在内外屏采用动态布局,保持图片视频等内容大小一致;展开大屏的图片视频等内容大小如要放大,最大不能超过屏幕高度。

2.1.3 弹窗

  • 弹窗在应用设计中比较常见,如运营内容、广告营销等,建议弹窗大小适中,且有清晰的供用户关闭的按钮;
  • 在折叠屏上,建议弹窗大小内外屏保持一致;展开大屏的弹窗如要放大,最大不能超过屏幕高度的70%。

2.2 页面布局设计

2.2.1 动态布局

  • 大屏设备能够在竖屏和横屏之间无缝切换,折叠屏设备还能够在内屏和外屏之间无缝切换,拥有强大的功能和内容体验。
  • 应用可能会遇到以下几种窗口情况

网页版app生成

小米大屏设备适配说明1小米大屏设备适配说明1

基于以上情况,推荐几种布局方式

A.拉伸

仅卡片区域、显示区域等拉伸,文字大小图标大小均保持一致

小米大屏设备适配说明1小米大屏设备适配说明1

B.缩放

根据窗口区域等比缩放内容信息

小米大屏设备适配说明1小米大屏设备适配说明1

C.拓展/增量/减量

根据窗口区域增加或减少项,项的尺寸大小保持不变

小米大屏设备适配说明1小米大屏设备适配说明1

D.重新布局

根据窗口区域重新对内容进行布局,以适应更好的信息阅读

小米大屏设备适配说明1小米大屏设备适配说明1

编辑:yimen,如若转载,请注明出处:https://www.yimenapp.com/kb-yimen/12620/

部分内容来自网络投稿,如有侵权联系立删

未经允许不得转载:一门应用 » 小米大屏设备适配说明1
分享到

相关推荐

联系我们

微信公众号

yimendabao

关注官方微信,了解最新资讯

客服QQ
4001658508

企业QQ,点击发起咨询