小程序怎么做自適應(yīng)各種手機(jī)尺寸

—— 2020 ——

09/27

00:00

來(lái)源：

作者：未知

2020/9/27 0:00:00 來(lái)源：不詳作者：未知

最新消息顯示，我們可以看到很多小程序界面，一些動(dòng)畫(huà)，畫(huà)布無(wú)法在不同分辨率手機(jī)上實(shí)現(xiàn)自適應(yīng)，下面小編就為大家解答小程序怎么做自適應(yīng)各種手機(jī)尺寸

解決的問(wèn)題：畫(huà)布，動(dòng)畫(huà)等js里面的操作，默認(rèn)是px而不是rpx, 無(wú)法根據(jù)手機(jī)屏幕自適應(yīng)

達(dá)到的效果：讓畫(huà)布，動(dòng)畫(huà)在不同分辨率的手機(jī)上實(shí)現(xiàn)rpx的自適應(yīng)

實(shí)現(xiàn)思路，獲取組件節(jié)點(diǎn)的寬高，然后把組件rpx單位的寬高填充到畫(huà)布的px單位，通過(guò)

小程序怎么做自適應(yīng)各種手機(jī)尺寸

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

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

}).exec()

獲取節(jié)點(diǎn)的rpx單位的寬高會(huì)自動(dòng)轉(zhuǎn)換成px單位。

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

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

}).exec()

使用在畫(huà)布里面：

ctx.translate(width, width);

以上是小程序怎么做留存，如果有想了解更多小程序問(wèn)題，請(qǐng)查看本網(wǎng)站，謝謝。

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

【本站聲明】
1、本站文章中所選用的圖片及文字來(lái)源于網(wǎng)絡(luò)以及用戶(hù)投稿，由于未聯(lián)系到知識(shí)產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識(shí)產(chǎn)權(quán)的登記，如有知識(shí)產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請(qǐng)立即聯(lián)系。
2、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀性描述，如您需要了解該類(lèi)商品/服務(wù)詳細(xì)的資訊，請(qǐng)您直接與該類(lèi)商品/服務(wù)的提供者聯(lián)系。

KESION 科汛軟件
KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專(zhuān)注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開(kāi)店SaaS社交電商服務(wù)平臺(tái)、在線教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷(xiāo)助手、私有化獨(dú)立部署品牌網(wǎng)校和在線教育咨詢(xún)等。
KESION 不斷通過(guò)技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過(guò)科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！

▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多