微信小程序 - rpx和px互转，以及系统给的 pixelRatio 值比例不对

• rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。

  规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则 750rpx = 375px = 750物理像素，1rpx = 0.5px。

  在开发过程中两种换算，下面两种换算公式选一个用就可以了，更具自己情况而定，只是换算时乘除的区别，推荐用 (750 / 屏幕宽度) 这种。

设备	rpx 换算 px 公式：(屏幕宽度 / 750)	px 换算 rpx 公式：(750 / 屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

• 在微信小程序开发的时候，通过 wx.getSystemInfo 获得的 rpx 换算比例 pixelRatio 值不对。

  通过小程序开发工具 iphone 5 模拟器进行测试，获得到的 pixelRatio = 2，但是通过屏幕宽 750rpx 进行换算得到比例为 2.34375。

  所以在通过系统给的这个比例进行换算 px 到 rpx 的时候，在不同屏幕上会出现问题，推荐使用通过自己换算的比例。

• 换算公式

获得换算比例 :

var pixelRatio1 = 750 / wx.getSystemInfoSync().windowWidth;  // 推荐
var pixelRatio2 = wx.getSystemInfoSync().windowWidth / 750;

rpx 转 px:

var px1 = rpx / pixelRatio1; // 推荐
var px2 = rpx * pixelRatio2;

px 转 rpx:

var rpx1 = px * pixelRatio1; // 推荐
var rpx2 = px / pixelRatio2;

• 我这边有封装 js 文件，导入即可使用 微信小程序 - 设备信息与版本更新。