uniapp微信小程序自定义刘海屏头部兼容问题_unipp 刘海屏幕 兼容写法

首先说一下，现在iPhone有刘海屏的一些型号（iPhone X iPhone XR iPhone XS Max…）;
通俗点说，因为微信小程序头部这玩意：如果需要和它平齐写一个头部样式的话，刘海屏会向下压一部分高度从而导致样式不平齐。所以我的解决办法是给他一个占位模块，将它压下的高度给他顶起来。

	<view class="fit" v-if="fit">
			<!-- 占位兼容刘海屏 -->
		</view>
1
2
3

uni.getSystemInfo(OBJECT) 获取手机设备

uni.getSystemInfo({
			    success:  (res)=> {
					console.log(res.model)
			        if(res.model.indexOf('iPhone X') != -1 || res.model.indexOf("iPhone XR") != -1  || res.model.indexOf("iPhone XS Max") != -1){
						this.fit = true
					}else{
						this.fit = false;
					}
			    }
			});
1
2
3
4
5
6
7
8
9
10

变量 fit用于判断是否是刘海屏从而是否显示占位模块从而解决问题。

其中--status-bar-heightuniapp是这样说：uni-app提供了状态栏高度的css变量–status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。