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

新宇最优秀

于 2021-03-04 14:07:57 发布

阅读量835

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/tendernessxy/article/details/114366939

针对iPhoneX及以上型号手机出现底部导航栏被黑线遮挡的问题，通过修改style样式，定位并调整相关class，成功解决了用户体验问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述问题现象：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))
  	  ) {
   	  	 //是iphoneX
   	   		this.isIphoneX = true;
  	  } else {
  	    	this.isIphoneX = false;
    }
}

style样式:

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

获取到底部导航栏的class

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

解决
在这里插入图片描述