微信小程序高度适配
参考文章【微信小程序:用 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使用