优化全面屏导航条遮挡底部内容问题

IPhone X以上的手机自带导航条，导致遮挡可视区域，所以需要将内容和导航条隔离开一定的距离，使用safe-area-inset-bottom完美解决。

具体做法是：

先添加头部meta属性viewport-fit=cover，我的是

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

对页面容器标签添加padding-bottom，像是这样，媒体查询是否兼容，然后添加底部padding

// 为导航条留出合适的空间
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .page {
        padding-bottom: constant(safe-area-inset-bottom) !important; // ios
        padding-bottom: env(safe-area-inset-bottom) !important; // android
    }
}

效果如图：

另外，首页以及其他有底部菜单的页面也要做适配

我的写法是：底部footer使用fixed卡在底部，page使用刚才的方法（加safe-padding）同时保留footer的高度，所以padding额外加上footer的高度，footer固定定位，bottom需加上safe-padding的大小，即

<div class="page">
    <div class="view-box">
        <router-view />
    </div>
    <nav class="footer">
        <!-- ... -->
    </nav>
</div>

.page {
    height: 100%;
    width: 100%;
    padding-bottom: 16vw
}

.page .view-box {
    height: 100%;
    overflow: scroll;
    background: #fff
}

.page .footer {
    height: 16vw;
	position: fixed;
    bottom: 0;
    /* ... */
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .page {
        padding-bottom:calc(16vw + constant(safe-area-inset-bottom))!important;
        padding-bottom: calc(16vw + env(safe-area-inset-bottom))!important
    }
    .footer {
        bottom: constant(safe-area-inset-bottom)!important;
        bottom: env(safe-area-inset-bottom)!important
    }
}

因为page的padding-bottom已经把内容区高度留好了，所以view-box高度写100%，overflow-y:scroll

效果如图：

此时可以保证内容区下面不镂空而且高度正好。

另外记录一下刚看到的compositionAPI

useScreenSafeArea | VueUse