微信小程序> 微信小程序——获取到px转化为rpx(根据设备宽高动态设置元素宽高)

微信小程序——获取到px转化为rpx(根据设备宽高动态设置元素宽高)

浏览量:2920 时间: 来源:鱼丸粗面不要香菜

在项目中需要给一个view标签动态的设置高度

首先,先通过调用wx.getSystemInfo获取设备信息

可以获取的信息如下图
小程序

wx.getSystemInfo({  success: function(res) {    console.log(res.model)    console.log(res.pixelRatio)    console.log(res.windowWidth)    console.log(res.windowHeight)    console.log(res.language)    console.log(res.version)    console.log(res.platform)  }})

这里我们可以获取到当前设备的screenHeight屏幕高度和windowHeight可使用窗口高度等,但是获取到的都是以px为单位的,如果要使用rpx的话则会需要有一个换算的操作

在换算前,先了解下rpx的由来

rpx是微信小程序中推出的新单位可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以可以将rpx理解为是rem方案的升级。

如下是官方文档给出的描述
小程序
在分析后可以得出,1rpx = 750 / 设备屏幕宽度

换算如下

wx.getSystemInfo({  success:function (res) {    console.log(res.windowHeight) // 获取可使用窗口高度    let windowHeight = (res.windowHeight * (750 / res.windowWidth)); //将高度乘以换算后的该设备的rpx与px的比例    console.log(windowHeight) //最后获得转化后得rpx单位的窗口高度  }}) 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎