layui移动端适配_实战：移动端适配的最佳实践

移动端适配我们需要做哪些事情? 一个最佳实践除了设置 viewport 和 rem 基准值，随着iPhone手机的不断升级，我们不得不正视以下2个问题：

• 安全区域适配
• 识别刘海屏

关于viewpoint-fit

在切入正题之前，我们先展开介绍一下viewpoint-fit，它的作用是用于设置可视区域的尺寸，属性如下：

最初的布局视窗是通过物理设备的屏幕进行计算，如下图所示：

圆形的屏幕上上显示的页面的一部分，目前是圆的但视窗是长方形的。因此,根据窗口的大小，页面的某些部分可以省略。viewport-fit 可以通过设置可视区域的大小来控制被省略的区域。

• auto：当设置成auto时，不会影响初始布局视口，并且整个网页都是可见的。 UA在视口外部绘制的内容未定义。 它可能是画布的背景颜色，也可能是UA认为合适的任何其他颜色。
• contain：当设置成contain时，初始布局视口和可视视口设置为最