异形屏适配(iphonex/xr/xs)

[KirinHuang]

异形屏安全区域

1. viewport-fit

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

2. safari 引入的constant、env
   1.只有设置了 viewport-fit=cover，才能使用 env()
   2.Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。

.device-iphonex {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}