WeChat applet – rpx and px are converted to each other, and the ratio of the pixelRatio value given by the system is incorrect

Hits: 0

  • 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 wx.getSystemInfo, the rpxconversion ratio pixelRatiovalue obtained through is incorrect.

    It is obtained by testing through the applet development tool iphone 5simulator pixelRatio = 2, but the ratio is obtained by converting the screen 750rpxwidth to 2.34375.

    Therefore, when converting pxfrom rpxthere will be problems on different screens. It is recommended to use the ratio converted by yourself.

  • Conversion formula

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 .

You may also like...

Leave a Reply

Your email address will not be published.