微信小程序简单获取屏幕视口高度

最新推荐文章于 2024-10-11 15:57:59 发布

原创最新推荐文章于 2024-10-11 15:57:59 发布 · 2.3w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

微信小程序

25 篇文章

订阅专栏

本文详细介绍了微信小程序中实现屏幕适配的方法，通过获取设备窗口的宽高并计算比例，从而将固定宽度转换为可变高度，确保了不同设备上的一致显示效果。

由于小程序的宽度是固定的 750rpx，我们可以先用 wx.getSystemInfo 来获取可使用窗口的宽高(并非rpx)，结合750rpx的宽度算出比例，再用比例来算出高度

let that = this;
wx.getSystemInfo({
  success: function (res) {
    let clientHeight = res.windowHeight;
    let clientWidth = res.windowWidth;
    let ratio = 750 / clientWidth;
    let height = clientHeight * ratio;
    that.setData({
      height: height
    });
  }
});

具体剖析一下：

let that = this;
// 获取系统信息
wx.getSystemInfo({
  success: function (res) {
    // 获取可使用窗口宽度
    let clientHeight = res.windowHeight;
    // 获取可使用窗口高度
    let clientWidth = res.windowWidth;
    // 算出比例
    let ratio = 750 / clientWidth;
    // 算出高度(单位rpx)
    let height = clientHeight * ratio;
    // 设置高度
    that.setData({
      height: height
    });
  }
});

关于微信小程序获取元素高度的文章：《微信小程序获取元素高度（获取元素节点信息）》