iphoneX 适配（底部导航栏被黑线遮挡）

本文主要是介绍iphoneX 适配（底部导航栏被黑线遮挡），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

描述问题现象：iphoneX以上型号的手机 底部导航栏被黑线遮挡 影响用户体验

解决过程：

 <div id="app" :class="{ isIphoneX: isIphoneX }"></div>

data() {return {isIphoneX :true}}

mounted(){if (/iphone/gi.test(navigator.userAgent) &&((screen.height == 812 && screen.width == 375) ||(screen.height == 896 && screen.width == 414))) {//是iphoneXthis.isIphoneX = true;} else {this.isIphoneX = false;}
}

style样式:

	最外层元素 &.isIphoneX {height: calc(100vh - 35px) !important;}

获取到底部导航栏的class

	.van-tabbar--fixed {position: absolute !important;}

解决

这篇关于iphoneX 适配（底部导航栏被黑线遮挡）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---