微信小程序高度适配

参考文章【微信小程序:用 rpx 和 wx.getSystemInfoSync() 来适配屏幕高度-CSDN博客

1.小程序的任何机型的宽度固定为750rpx;为了适配不同设备的高度可以通过下面的公式转化

750/设备宽度=屏幕设置高度/设备高度

所以自适应屏幕应该设置的高度=750*设备高度/设备宽度

2.获取设备信息

App({
  globalData:{
    screenTotalH:0//设备屏幕高度
  },
 onLaunch: function () {
    const that = this;
    wx.getSystemInfoAsync({
      success (res) {
        that.globalData.screenTotalH = 750*res.windowHeight/res.windowWidth;
        console.log(that.globalData);
      }
    });

小程序选择机型:

调试器结果显示:

3.页面中使用

页面js获取

 页面wxml使用

 

posted @ 2024-01-23 13:49  yheyi  阅读(401)  评论(0编辑  收藏  举报