解决Iphonex 底部按钮fixed,bottom:0 底部留白问题

注意:
配合viewport-fit=“cover”使用

解决方案：

    
我是中间区域
    
我是fixed按钮

// css 区域
.wrapper{
    position: relative;
    padding-bottom: 100px;
    box-sizing: border-box;
}
.main-wrapper{
    overflow: auto;
}
.btn-wrapper{
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0;
    bottom: 0;
}
// iphonex 系列 需增加样式
//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    .wrapper{
        height: 100vh;
        overflow: hidden;
    }
    .main-wrapper{
        height: 100%;
    }
}