iphoneX适配

iphoneX变化：顶部刘海，底部横条，页面圆角

 

1、配置meta

<meta name="viewport" content="viewport-fit=cover"> 

　　

2、预留安全距离

constant和env顺序不能变，且必须同时存在

//为导航栏+状态栏的高度 88px 
padding-top: constant(safe-area-inset-top); 
padding-top: env(safe-area-inset-top); 
 
//为底下圆弧的高度 34px 
padding-bottom: constant(safe-area-inset-bottom); 
padding-bottom: env(safe-area-inset-bottom);