小米大屏设备适配说明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 方案保持一致。
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适配文档、Sample,Activity 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 小窗
在多任务处理场景下,小窗意在解决临时使用某个应用的场景,例如:在使用游戏应用时,不便离开,但想发消息给朋友,此时就可以借助小窗打开第二应用
5.1.2 迷你窗
迷你小窗意在解决应用临时挂机的场景,例如:等待网约车、等待游戏更新、观看直播等
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.getResources().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资料进行适配:
5.3 分屏功能介绍
分屏场景意在解决长时间并行使用两个应用时的场景,例如:一边听网课,一边记笔记等;一边看视频,一边逛知乎、微博等
5.4 分屏适配技术文档
编辑:yimen,如若转载,请注明出处:https://www.yimenapp.com/kb-yimen/12643/
部分内容来自网络投稿,如有侵权联系立删