小米大屏设备适配说明3-APP开发

小米大屏设备适配说明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的大小。