安全区域(刘海屏)处理

meta标签viewport设置viewport-fit=cover

css中使用env()(ios >= 11.2) 和 constant()(ios < 11.2) 处理。
以下四个值，对应四个边的安全距离。
safe-area-inset-left
safe-area-inset-right
safe-area-inset-top
safe-area-inset-bottom

padding-bottom: 100px;
padding-bottom: calc(100px +  constant(safe-area-inset-bottom));
padding-bottom: calc(100px +  env(safe-area-inset-bottom));

简写可以使用postcss-safe-area来处理。

可以通过@supports检测，隔离兼容样式。