In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-07 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
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.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.