页面分成header,main,footer
在header里面最外层加样式:
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
在main内容部分要加上
.main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
在底部footer外层加上
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
整体代码如下:
<template>
<div>
<div class="preview_header">
<div class="header">
<p class="header_left" @click="clickGoBack">返回</p>
<p class="header_title">标题</p>
<p class="header_right" @click="clickMake">编辑</p>
</div>
</div>
<div class="main">
<div class="content">
<p>内容</p>
</div>
</div>
<div class="footer_con">
<div class="footer">
<div class="submit" @click.stop="clickSubmit">
<p class="submit_btn">提交</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Index",
data () {
return {
};
},
methods: {
//左箭头返回
clickGoBack () {
this.$store.state.entry === this.$route.path ? this.$ZhiYue.closePage() : this.$router.back();
},
//点击右边按钮
clickMake () { }
}
}
</script>
<style scoped lang='scss'>
* {
margin: 0;
padding: 0;
}
.preview_header {
width: 100%;
position: fixed;
top: 0;
background: #ffffff;
z-index: 999;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.header {
width: 100%;
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: solid 1px #eeeeee;
}
.header_left {
margin-left: 16px;
position: absolute;
left: 0;
}
.header_title {
width: 100%;
font-size: 18px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #333333;
text-align: center;
}
.header_right {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: center;
color: #333333;
margin-right: 16px;
position: absolute;
right: 0;
}
.main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.content {
margin-top: 44px;
padding-bottom: 80px;
}
.footer_con {
width: 100%;
position: fixed;
bottom: 0;
z-index: 10;
background: #ffffff;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.footer {
padding-top: 12px;
padding-bottom: 12px;
}
.submit {
height: 44px;
background: linear-gradient(90deg, #50a3ff, #1283ff);
border-radius: 4px;
margin: 0 16px;
text-align: center;
line-height: 44px;
p {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: #ffffff;
text-align: center;
}
}
</style>
也可以单独判断是否是iphoneX
isPhoneX () {
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
if (screen.height == 812 && screen.width == 375) {
console.log('是iphoneX')
} else {
console.log('不是iphoneX')
}
} else {
console.log('是安卓')
}
}