平时用谷歌浏览器的f12和微信开发者工具的公众号网页模式调试，调试的时候看着效果还行，上线时配到商家小票页面上看，安卓和苹果手机上的样式效果完全不一样，安卓显示的字体比苹果的大很多；而且安卓和苹果手机上按钮触发点位置都会偏移，导致经常点击按钮没反应，实际是没点到元素上，不知道什么原因，有遇到过这些问题的老师吗？

样式都设置了下面这些，请各位大佬帮忙看看。（定高后调试时看的效果会比正式商家小票看的效果，高度会减小，左图调试时，右图正式环境）

.merchantReceipt{
  background: #fff;
  height: 100vh;
  display: flex;
  margin: 0 auto;
  position: relative;
  .back-btn{
    position: absolute;
    right: .267rem;
    top: .267rem;
    .mint-button--primary{
      background: #fff;
      color: #7e7b7b;
      border: .027rem solid #ddd;
      font-size: 22px;
    }
  }
  .inner{
    width: 440px;
    margin: auto;
    text-align: center;
    .sucess-icon {
      text-align: center;
      position: relative;
      z-index: 999;
      span {
        display: inline-block;
        height: 2.133rem;
        line-height: 2.133rem;
        width: 2.133rem;
        border-radius: 50% 50%;
        border: 0.142rem solid #fff;
        background-color: #56bf5d;
        i {
          color: #fff;
          font-size: 1rem;
        }
      }
    }
    .desc{
      margin-top: .533rem;
      font-size: .933rem;
      font-weight: 500;
      margin-bottom: .533rem;
    }
    .yuan{
      font-size: 1.333rem;
      font-weight: bolder;
      line-height: 1.333rem;
    }
    .price{
      font-size: 2.667rem;
      font-weight: bolder;
    }
  }
}

<template>
  <div class="merchantReceipt">
    <div class="inner">
      <div class="sucess-icon">
        <span><i class="mint-toast-icon mintui mintui-success"></i></span>
      </div>
      <p class="desc">支付成功</p>
      <p v-if="price+''"><span class="yuan">￥</span><span class="price">{{price}}</span></p>
    </div>
    <div class="back-btn">
      <mt-button type="primary" @click="toBack">返 回</mt-button>
    </div>
  </div>
</template>