，首先需要在meta标签中添加viewport-fit=cover。默认的viewport-fit=contain类似于background-size。当该值设置为cover时，安全区域可以覆盖全屏，与适配其他设备无异。但是，内容会被顶部和底部的硬件阻挡。如果不想被挡住，需要在头部底部预留一定的高度。所以我们需要给身体添加填充。官方提供了四个值，可以直接获取头部底部和横屏左右值。我们只需要在我们的容器中设置四个值：inset-right)padding-bottom:constant(safe-area-inset-bottom)需要注意的是，如果viewport-fit的值没有设置为cover，constant()是无效的。竖屏时左右的值为0，横屏时左右的值才有效。codemeta
