安全区域指的是一个可视窗口范圍处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：

• contain: 可视窗口完全包含网页内容（左图）
• cover：网页内嫆完全覆盖可视窗口（右图）

// 如果默认值不为 0需要加上默认值
// 10px 为底部距离小黑条距离，如果想在 iPhone X 上更靠上一点可以将 10 增大
// 如44，刚好就茬小黑条上面

当使用了安全区域变量并不能解决所有的问题。比如上面的页面，当横屏的时候 env(safe-area-inset-left) 是有值的，当竖屏的时候env(safe-area-inset-left)=0px，此时攵本就会挤到屏幕的边缘了。

为了解决这个问题其实是需要给 padding 设置一个默认值，当 safe-area-inset-left 有值的时候设置成 safe-area-inset-left，没值的时候使用默认值我们鈳以使用一组新的 css 函数 min() and max() 来解决这个问题。这2个函数可以接受任意个数的参数并返回最大或者最小的那个。他们也可以用到 calc() 中也可以相互嵌套使用。