微信小程序在HarmonyOS 和 nexus5 机型 与其它有差异？

Question

如题，在HarmonyOS(鸿蒙)，nexus5 机型 与其它机型CSS间距有差异。HarmonyOS(鸿蒙)，nexus5红色间隔比较大如图2,其它安卓，IOS系统显示为1图。如何解决？

图1：

图2：

.container {
    z-index: 10;
    width: 100vw;
    padding: 15rpx;
    color: #191919;
}
  .swiper-top {
    height: 400px;
    position: relative;
    margin: 0 0 450rpx 0;
    }

.search-panel {
    width: calc(100% - 48px); 
    height: 504rpx; 
    margin: 0 auto; 
    position: absolute; 
    left: 0; 
    top: 400rpx;
    right: 0; 
    bottom: 0;
    box-shadow: 0px 0px 15px #999; 
    border-radius: 15px; 
    z-index: 99;
}
.swiper-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

<view class="container">
   <view class="swiper-top">
        ... ... 
   </view>
   <view class="search-panel">
    ... ... 
    </view>
   <view class="swiper-bottom ">
     ... ... 
   </view>
</view>

Answer 1

将1区域的高度设置使用rpx效果基本一致。

  .swiper-top {
    height: 400rpx;
    ...
    }