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