小米大屏设备适配说明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适配文档、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.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 分屏功能介绍
分屏场景意在解决长时间并行使用两个应用时的场景，例如：一边听网课，一边记笔记等；一边看视频，一边逛知乎、微博等
5.4 分屏适配技术文档
编辑：yimen，如若转载，请注明出处：https://www.yimenapp.com/kb-yimen/12643/
部分内容来自网络投稿，如有侵权联系立删
