H5关于meta设置，以及IOS底部兼容

使用场景：H5开发过程中，由于移动端和Web端区别较大，需要设置一些meta参数

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

参数说明：

1.width:可视区域的宽度，值可为数字或关键词device-width

2.height:同width

3.intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

4.maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

5.maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

6.user-scalable:是否可对页面进行缩放，no 禁止缩放

7.viewport-fit 可以设置可视视窗的大小，它有三个属性值：

• Auto：默认值。这个值不影响初始布局视窗，整个 Web 页面是可视的，与Contain表现一致。

• Contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形。

• Cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形。

IOS底部安全区域兼容：

 

// iphone 底部安全区适配
@supports (bottom: env(safe-area-inset-bottom)) {
  #app, .is-safe-area {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}