vue-cli项目中iPhoneX底部黑色横条遮挡Footer组件的解决方法
// index.html
<head>
// 新增 viewport-fit=cover
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no,viewport-fit=cover">
<style>
body {
position: relative;
padding-bottom: env(safe-area-inset-bottom);
}
</style>
</head>// App.vue
<template>
<div id="app">
<router-view/>
<div class="iphoneXBottom"></div> // 底部遮罩层
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style lang="scss">
.iphoneXBottom {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: env(safe-area-inset-bottom);
background: #fff;
z-index: 500;
}
</style>
// Footer组件
<template>
<div class="baseFooter"></div>
</template>
<script>
export default {
name: 'baseFooter'
}
</script>
<style scoped>
.baseFooter {
position: fixed;
left: 0;
bottom: env(safe-area-inset-bottom);
width: 100%;
height: 50px;
z-index: 500;
}