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

小米大屏设备适配说明3

小米大屏设备适配说明3

3.5 H5页面适配

我们推荐项目使用响应式设计,实现同一页面自动适配多种屏幕尺寸的效果。

3.5.1 元标签设置

通常情况下,开发者应使用元标签将视口大小调整为屏幕宽度,以确保元素尺寸按照预期显示。

<meta name="viewport" content="width=device-width,initial-scale=1">

开发者可以提供额外的参数来限制用户的缩放行为,一般来说这样做可以优化普通用户体验,减少误操作,但会影响视力障碍用户进行缩放操作,造成访问性问题。

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

3.5.2 使用相对 CSS 长度单位

我们推荐开发者在响应式开发中尽量使用相对长度单位,包括:em、rem、%、vw、vh。以下是这些单位的一般使用场景。

em 尺寸与当前字体大小相关
rem 尺寸相对固定,基于断点与屏幕宽度成阶梯性相关
% 尺寸与父元素相关
vw 区别于 rem,尺寸与屏幕宽度成线性相关
vh 尺寸与屏幕高度成线形相关

上述的只是一般情况,实际开发中使用哪个单位还需视设计要求而定,合理使用长度单位能起到事半功倍的效果。

3.5.3 布局方式

在响应式开发中,开发者应优先使用以下方式进行布局,构建适应性更强的页面。

A.Flexbox(弹性布局)

使用display: flex 可令容器元素启用弹性布局。即使在不确定容器内元素尺寸的情况下,开发者也可以灵活控制元素的大小比例和对齐方式。

参考资料

B.Grid(栅格布局)

Flexbox 可以很好地解决同一行/列内元素的布局问题,Grid 则更适合用于拥有多行/列的二维布局。使用display: grid 可令容器元素启用栅格布局。开发者可灵活控制行列间距、大小比例、对齐方式。

参考资料

3.5.4 CSS 媒体查询

使用 CSS 媒体查询技术,可以使同一元素的样式在不同设备下有不同的表现。通常,我们使用设备屏幕宽度作为判断设备类型的依据,以下是我们推荐的断点划分规则。

屏幕宽度范围 设备类型
320 px < width ≤ 480px 手机竖屏、折叠屏小屏竖屏
480 px < width ≤ 680px 折叠屏展开竖屏
680 px < width ≤ 960px 手机横屏、折叠展开横屏、折叠屏小屏横屏
1200px < width 桌面端设备

一般情况下,建议开发者使用媒体查询统一控制根字体大小,简化适配流程。

html {  
  font-size: 16px;
}
@media screen and (min-width: 480px) {
  html {
    font-size: 17px;
  }
}
@media screen and (min-width: 680px) {
  html {
    font-size: 18px;
  }
}

3.5.5 Javascript 媒体查询

在一些特殊情况下,页面需要根据断点进行更加复杂的调整。如页面文案,交互逻辑等需要随断点而变化。此时需要使用 Javascript 进行更加细微的调整,我们推荐开发者使用matchMedia 方法进行断点识别,断点划分方案建议与 CSS 网站生成app工具方案保持一致。

参考资料

3.5.6 其他建议

1)使用响应式图片,用于图片进行尺寸匹配的场景。

img {
  /* 按比例拉伸或缩放至父元素宽度 */
  width: 100%  }
img {
 /* 按比例缩放至父元素宽度,不拉伸 */
  max-width: 100%  
}
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 按比例拉伸或缩放至父元素宽高 */
  object-fit: cover;
  object-position: center;
}

2)为块级元素添加 max-width 而非 width,避免在更小尺寸的显示设备上宽度溢出。

4、平行窗口适配指南

推荐采用Android 12L方案进行适配,您可自主定义activity在左右分屏间的跳转方式。

详细参考Android适配文档SampleActivity Embedding 适配指南

平行窗口适配情况标记

应用主动适配12L平行窗口,需要在AndroidMainfest.xml文件设置标记。

<!-- support 12L Activity Embedding for large screen -->
        <meta-data
            android:name="embedded"
            android:value="true" />

5、进阶开发适配指南(小窗、迷你窗及分屏)

5.1 小窗迷你窗功能介绍

5.1.1 小窗

在多任务处理场景下,小窗意在解决临时使用某个应用的场景,例如:在使用游戏应用时,不便离开,但想发消息给朋友,此时就可以借助小窗打开第二应用

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

5.1.2 迷你窗

迷你小窗意在解决应用临时挂机的场景,例如:等待网约车、等待游戏更新、观看直播等

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

5.2 小窗迷你窗适配指南

小窗适配技术文档

MIUI的小窗是基于Android的多窗口Freeform方案实现的。

小窗目前主要问题是应用兼容性导致的一系列问题,内容显示不全、Touch事件不响应等等,其实根本原因是应用没有很好的支持、适配多窗口、多分辨率,如下是小窗适配的一些参考性适配指南。

多窗口适配支持文档

支持不同屏幕分辨率的开发技巧文档

5.2.1 常用适配方法

(1) 如何支持小窗

支持小窗的方式非常简单,只需要声明一个属性,直接在AndroidManifest.xml中 配置属性android:resizeableActivity=”true” ,不支持小窗直接配置为false,系统默认是支持小窗的。

(2)判断自己是否在小窗  
Activity.onMultiWindowModeChanged(boolean isInMultiWindowMode, Configuration  newConfig)  
Activity.isInMultiWindowMode()   判断是否处于多窗口                                                    
Activity.getWindowingMode()  当返回5时表示小窗,需要反射调用
String config = context.getResources().getConfiguration().toString();
boolean isInFreeformWindow = config.contains("freeform");
(3)获取小窗的位置/大小等信息

context.getResources().getConfiguration().windowConfiguration.getBounds(),其中Configuration对象里也有小窗的模式以及bounds,所以我们也需要重写ConfigurationChanged方法,并对界面布局做相应调整,如切换布局、调整控件位置和间距等。

(4)Activity大小切换时不重启适配

强烈建议应用在Activity窗口大小切换时不重启适配,遵循google规范,在android:configChanges 属性增加 screenSize|screenLayout|orientation|smallestScreenSize,并在Activity的onConfigurationChanged回调中更新宽高刷新各个子布局。

(5)特别需要注意的适配点,焦点窗口适配

迷你小窗和小窗都有可能成为不是焦点窗口(Focus Window),其中迷你小窗一定是没有焦点的,小窗和小窗下面的全屏应用是可以随意进行焦点切换的,touch在哪个窗口,哪个窗口就是焦点窗口,所以就要保证应用在没有焦点的前提下也是可以正常运行的,特别是视频类app。关键方法:Activity.onWindowFocusChanged(boolean hasFocus)

(6)获取屏幕宽高有些APP会跟随屏幕大小动态计算View的大小,但是有些接口在多窗口形式下面并不试用,要注意以下几点:
  • 在获取Display 对象 或者获取 Resources对象时使用Activity的Context 不要使用Application的Context;
  • 获取Resources对象时不要用context.getResourcapp打包es().getSystem()用context.getResources()就行;
  • Display下有getMetrics getRealMetrics getSize getRealSize四个方法, getRealMetrics和 getRealSize 永远会返回屏幕的宽高,无论应用是否在多屏下, 而getMetrics和getSize会可以获取Activity的大小。
(7)获取View的位置

获取View的位置有两个方法:

  • View.getLocationInWindow(int[] outLocation) 返回距离View所在的Window左上角的距离;
  • View.getLocationOnScreen 返回距离屏幕左上角的距离(由于在小窗模式下应用的位置可以移动, 所以该返回值有时并非是你想要的,所以要慎用)。

5.2.2 其他说明

全局自由窗口功能在MIUI12安卓Q版本以上支持。

如果应用想要启用小窗或者分屏模式下的拖拽功能,请参考如下google资料进行适配:

Android Developer上的拖放文档

AOSP里的DragAndDrop样例应用

github Demo下载连接

5.3 分屏功能介绍

分屏场景意在解决长时间并行使用两个应用时的场景,例如:一边听网课,一边记笔记等;一边看视频,一边逛知乎、微博等

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

5.4 分屏适配技术文档

https://dev.mi.com/console/doc/detail?pId=1161

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

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

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

相关推荐

联系我们

微信公众号

yimendabao

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

客服QQ
4001658508

企业QQ,点击发起咨询