h5页面兼容刘海屏快速解决方案

关键词条：

viewport-fit:cover  -   视图端口被缩放以填充设备显示

@supports  -  css中用来检测浏览器是否支持某些css语法功能的一个标签，它和@media一样支持or(或者)、and(并且)、not(非)关键字用来做逻辑判断。

safe-srea-inset-[top | right | bottom | left]  -  设置确保安全边界

 

兼容ios底部横条css代码：

1、

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

2、在需要设置的元素上（比如body，或者fixed定位的元素）

@supports (padding-bottom: constant(safe-area-inset-bottom)) or (padding-bottom: env(safe-area-inset-bottom)){
  选择器{
    //上
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);

    //右
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);

    //下
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    //左
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
  }
}