微信小程序高度适配

合集 - 微信小程序(11)

1.微信小程序自定义顶部tap栏2024-01-192.自定义tabbar2024-01-213.微信小程序分包2024-01-23

4.微信小程序高度适配2024-01-23

5.微信小程序中使用Vant Weapp组件库2024-01-266.如何使用云函数2024-01-297.微信小程序连表查询lookup2024-01-318.微信小程序获取自定义属性2024-01-319.微信小程序页面跳转传参2024-01-3110.页面跳转传参，携带的数值型数据会转成是字符串2024-02-0111.小程序云函数 异步请求2024-02-03

收起

参考文章【微信小程序：用 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使用