How does Mini Program adapt to various mobile phone sizes
Most people do not understand the knowledge of this article "how to adapt Mini Program to various mobile phone sizes", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Mini Program how to adapt to various mobile phone sizes" article.
Problem solved: the operation in js, such as canvas and animation, defaults to px rather than rpx, and cannot be adapted according to the phone screen.
Effect achieved: make canvas and animation self-adaptive to rpx on mobile phones with different resolutions
To achieve the idea, get the width and height of the component node, and then fill the width and height of the component rpx unit into the px unit of the canvas, through the
Wx.createSelectorQuery () .select ('# canvas-container') .boundingClientRect (function (rect) {
Var width = rect.width / / Node width Node height is rect.height
}) .exec ()
Getting the width and height of the rpx units of the node is automatically converted to px units.
Wx.createSelectorQuery () .select ('# canvas-container') .boundingClientRect (function (rect) {
Var width = width of rect.width/2 / / Node
}) .exec ()
To use in a canvas:
Ctx.translate (width, width)
The above is about the content of this article on "how to do Mini Program to adapt to various mobile phone sizes". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please pay attention to the industry information channel.
