小程序怎么做自適應各種手機尺寸

2020-09-27|HiShop

導讀：最新消息顯示，我們可以看到很多小程序界面，一些動畫，畫布無法在不同分辨率手機上實現自適應，下面小編就為大家解答小程序怎么做自適應各種手機尺寸...

最新消息顯示，我們可以看到很多小程序界面，一些動畫，畫布無法在不同分辨率手機上實現自適應，下面小編就為大家解答小程序怎么做自適應各種手機尺寸

解決的問題：畫布，動畫等js里面的操作，默認是px而不是rpx, 無法根據手機屏幕自適應

達到的效果：讓畫布，動畫在不同分辨率的手機上實現rpx的自適應

實現思路，獲取組件節(jié)點的寬高，然后把組件rpx單位的寬高填充到畫布的px單位，通過

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {

var width = rect.width // 節(jié)點的寬度節(jié)點高度為 rect.height

}).exec()

獲取節(jié)點的rpx單位的寬高會自動轉換成px單位。

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {

var width = rect.width/2 // 節(jié)點的寬度

}).exec()

使用在畫布里面：

ctx.translate(width, width);

以上是小程序怎么做留存，如果有想了解更多小程序問題，請查看本網站，謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序請查看：小程序商店

上一篇：2021年5種不同的小程序開發(fā)框架對比 下一篇：小程序怎么做自適應屏幕高度