WeChat applet – rpx and px are converted to each other, and the ratio of the pixelRatio value given by the system is incorrect
rpxThe unit is the size unit in the WeChat applet , which
rpxcan be adapted according to the width of the screen.
There are two conversions in the development process. You can choose one of the following two conversion formulas. It depends on your own situation. It is only the difference between multiplication and division during conversion. It is recommended to use (750 / screen width).
|equipment||rpx conversion px formula: (screen width / 750)||px conversion rpx formula: (750 / screen width)|
|iPhone5||1rpx = 0.42px||1px = 2.34rpx|
|iPhone6||1rpx = 0.5px||1px = 2rpx|
|iPhone6s||1rpx = 0.552px||1px = 1.81rpx|
When the WeChat applet was developed
pixelRatiovalue obtained through is incorrect.
It is obtained by testing through the applet development tool
pixelRatio = 2, but the ratio is obtained by converting the screen
Therefore, when converting
rpxthere will be problems on different screens. It is recommended to use the ratio converted by yourself.
Get the conversion ratio:
var pixelRatio2 = wx.getSystemInfoSync().windowWidth / 750;
rpx to px:
var px1 = rpx / pixelRatio1; // recommended var px2 = rpx * pixelRatio2;
px to rpx:
var rpx1 = px * pixelRatio1; // recommended var rpx2 = px / pixelRatio2;
- I have a packaged js file here, which can be imported and used WeChat applet – device information and version update .