微信调试工具与iphone与Android不一致的地方总结

iPhone与android

textarea auto-height

1. 调试工具与android单行高度: 20px;
2. iPhone单行高度: 36px;

解决方法: 想要android与iPhone一致，还想用auto-height,根据手机类型给父元素加不同的padding。

const that = this
wx.getSystemInfo({
    success: function(e) {
        that.globalData.isAndroid = (e.platform == 'android' || e.system.indexOf('Android') >= 0)
    }
})

/* iPhone 父元素的padding */
.textarea-cell {
  padding-top: 14rpx
}
/* android 父元素的padding */
.android-cell.textarea-cell{
  padding-top: 28rpx;
}


/* textarea左侧文字高度 */
.cell-title{
  height: 60rpx;
  line-height: 60rpx;
}
/* android textarea左侧文字高度 */
.android-cell .cell-title{
  height: 30rpx;
  line-height: 30rpx;
}

不使用fixed的页面，在iPhone上面会有弹性(页面可以上下拉，超出边界)

• fixed

适用有scroll的页面

/* 缺点: 与scroll-view结合有bug, 如果从非scroll-view滑动到scroll-view,再滑动scroll-view会滑不动 */
page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

• window.disableScroll(只能单独配置页面json)

适用于页面使用scroll-view的页面 || height就是100vh的页面

  // 缺点: 页面不能scroll了，
  "disableScroll": true

iPhoneX底部按钮，要加高度

wx.getSystemInfo({
  success: (res) => {
    this.globalData.phone = ((res.model.indexOf('iPhone') >= 0 && res.model.indexOf('X') >= 0)) ? 'iPhoneX' : 'other';
  },
})

 .iPhoneX {
   padding-bottom: 10px;
   box-sizing: content-box !important;
 }

wx.getSystemInfoSync()

自定义custom的情况下，iPhone与android返回的wx.getSystemInfoSync().windowHeight, 是不同的, 请使用wx.getSystemInfoSync().screenHeight

调试工具与真机(iPhone与android一致)

wx.switchTab

1. 调试工具: 从my页面到login, 从login失败直接到index, 不触发my页面show生命周期(就不显示my)
2. 真机: 从my页面到login, 从login失败直接会短暂跳转my页面，触发my页面的show生命周期,在跳转index(index,my都是tab页面)