<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover”>

参数解释
width – viewport的宽度 height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

在为页面适配刘海屏之前，我们首先得在页面的 meta 中添加一个新的值：viewport-fit=cover

这么设置之后，视图端口被缩放以填充设备显示。换句话说就是网页会扩展到整个屏幕。

在介绍适配之前，我们先说一下适配用到的关键 CSS 函数 —— env()。env()函数以类似于var函数的方式将用户代理定义的环境变量值插入到你的 CSS 中去。这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。

body {
  padding:constant(safe-area-inset-top)constant(safe-area-inset-right)constant(safe-area-inset-bottom)constant(safe-area-inset-left);/* 兼容 iOS < 11.2 */
  padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);/* 兼容 iOS >= 11.2 */}

加入这段css代码后的效果

参考链接：https://juejin.cn/post/6921998970214416397

js如何获取刘海屏安全区域高度的方法，首先先设置

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

然后就可以通过

getComputedStyle(document.documentElement).getPropertyValue("--sat")

带有px的数值，可以通过parseint(getComputedStyle(document.documentElement).getPropertyValue(“–sat”) ,10)的方法转为int