适配

H5页面在移动端，需要适配ios底部黑条（自从iphoneX取消了物理按键）。 涉及页面主要为：主页面，和各种相对底部位置固定的组件（例如底部导航、底部回顶按钮等）。

补充说明：本文适配内容，主要涉及h5页面保证处于视口的安全区域内的适配。所谓安全区域，指其范围内的内容，不受设备界面上圆角、齐刘海、小黑条的影响，从而保证页面可视、可操作。

效果

第一步，设置网页在可视窗口的布局方式

<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">

注意：viewport-fit=cover这一步很重要，设置了viewport-fit=cover方式，才能使用后文中的 env()。

第二步，页面主体内容限定在安全区内

兼容样式如下：

.compatible-ios-bottom {
    /*兼容 IOS<11.2*/
    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
    padding-bottom: env(safe-area-inset-bottom);
}

在需要底部适配的页面，以及底部相对固定的浮层中，引入兼容样式：

@import '@/assets/common.css';

<div class="footer compatible-ios-bottom">

关键知识点

webkit.org/blog/7929/d…