uni-app 关于自定义标题栏时状态栏高度在不同手机的适配问题

前端小白的uni-app艰难学习之路

解决

在自定义标题栏时，虽然可以自由定义标题栏内容了，但我们通常又会面临着状态栏也一起塌陷的情况，在普通的手机上我们通过官方提供的css变量–status-bar-height来设置，下面是官方给出的解决办法

在注意里也提到了微信小程序环境下iPhoneX是需要判断机型来设置高度的

/* iPhone X in portrait & landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) {
}

/* iPhone X in landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
}

/* iPhone X in portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
}

我根据官方给出的方法确实解决了iPhoneX的问题，但是我的手机型号是三星S10，和iPhoneX出现的问题差不多，不过上面的解决方法确不适合，于是我把方案稍微改了一下：

@media only screen and (min-device-width : 375px) and (max-device-width : 821px) {
  .h-22 {
    height: 68upx !important;
  }
  .top {
    top: 68upx !important;
  }
}
.h-22 { // 状态栏高度
  width: 100%;
  height: var(--status-bar-height);
}
.top { // 自定义标题栏距离顶部的距离
  top: var(--status-bar-height);
}

因为我不需要横屏，所以把横竖屏的判断都去掉了，(max-device-width : 821px)这里821px是我获取的手机高度，还有像素比(-webkit-device-pixel-ratio : 3)，这个值不是固定的，不同手机是不一样的，所以我给去掉了，上面的代码在三星S10和iPhoneX上都能作用，条件有限，没法测试更多情况，大家在不同型号测试有问题可以希望可以告诉我一声