首先需要为meta标签加上viewport-fit=cover，默认viewport-fit=contain，跟background-size类似。
当值设置为cover既可让安全区域铺满全屏，就跟适配其他设备没什么区别了。
但是内容会被顶部和底部的硬件遮挡，如果不想被遮挡，就需要头部底部预留一定高度。
所以就需为body加上padding，官方提供了四个值，可以直接获取到头部底部以及横屏时候的左侧右侧值，我们只需要在自己的容器设置上着四个值即可：
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

• 需要注意的是，viewport-fit值不为cover设置constant()是无效的
• 竖屏时候左侧右侧值为0，横屏时候左侧右侧才有值

code

meta

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

css

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}