iPhoneX安全区域(Safe Area)屏幕适配

问题：ios手机视频播放页面返回按钮点击失效。

定位：样式适配。

使用苹果官方推出适配方案css函数env()、constant()来适配

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离

safe-area-inset-right：安全区域距离右边边界的距离

safe-area-inset-top：安全区域距离顶部边界的距离

safe-area-inset-bottom ：安全距离底部边界的距离

注意： env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效。

一、meta设置：

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

二、设置env和constant代码，env()和constant()需要同时存在，而且顺序不能换

方式一：

/* 可以通过增加padding-top来适配 */
padding-top: constant(safe-area-inset-top); /*兼容 IOS<11.2*/
padding-top: env(safe-area-inset-top); /*兼容 IOS>11.2*/
 
/* 可以通过margin-top来适配 */
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
 
/* 或者改变高度*/
height: calc(55px +  constant(safe-area-inset-bottom));
height: calc(55px +  env(safe-area-inset-bottom));

方式二：

使用 @supports 隔离兼容样式。

当浏览器支持top: constant(safe-area-inset-top)或者top: env(safe-area-inset-top)的时候，新增margin-top的样式。

@supports (top: constant(safe-area-inset-top)) or (top: env(safe-area-inset-top)) { 
	.header {
            margin-top: constant(safe-area-inset-top);
            margin-top: env(safe-area-inset-top);  
        }
}