Tinniccii

刘海屏适配

By Tinco Chan in

某一天突然遇到了这个需求，不过也还是挺简单的。

viewport-fit

在刘海屏的适配中，采用 viewport-fit 标签作为适配方案。该属性是 w3c.org 官方给出的关于圆形展示(Round display) 的标准中提出的，意思是对于某些屏幕并不是矩形形状的设备的时候浏览器该如何显示。

viewport-fit官网文档

viewport-fit 取值如下：

  • auto （默认）
  • contain （页面内容显示在 safe area 内同auto）
  • cover （页面内容充满屏幕）

env()和constant()

在定义 viewport-fit 之后，浏览器会自动生成四个 padding 变量，即用来将页面向内挤压到可以正常显示的位置，这个时候需要用到 env 或者 constant 来将变量转换成 CSS属性并且赋值给属性。

因为 constant 已经被弃用，目前最稳妥的方式是 constant 和 env 一起使用。var预定义变量官方文档。

padding-bottom:constant(safe-area-inset-bottom); // 兼容 iOS < 11.2 
padding-bottom:env(safe-area-inset-bottom); // 兼容 iOS >= 11.2

注意：

  1. 当设置了 **viewport-fit: contain** 之后，也就是默认的时候，设置 safe-area-inset-left，safe-area-inset-right，safe-area-inset-top，safe-area-inset-bottom 会不生效。
  2. 当设置了 viewport-fit: cover 之后，要设置如下：
body {
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px 
	padding-left: env(safe-area-inset-left); //如果未竖屏时为0 
	padding-right: env(safe-area-inset-right); //如果未竖屏时为0 
	padding-bottom: env(safe-area-inset-bottom);//为底下圆弧的高度 34px 
}
  1. 如果元素是 fixed 定位并且 bottom 为 0；那么除了设置 body 的 padding-bottom 还不够，还需要给元素自身添加 padding ，因为他是相对于屏幕底部定位的。
{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。 如果元素是fixed定位且 bottom 不等于 0，则只调整位置就可以了，增加 margin-bottom 或者改变 bottom 。