小程序页面如何适应多种屏幕尺寸

小程序页面如何适应多种屏幕尺寸

设置小程序页面适应多种屏幕尺寸的方法

1.首先，进入微信开发者工具，在小程序项目中新建一个页面；

<view id='canvas-container' class='ctx' style='width:200rpx;height:100rpx;'>

2.通过wx.createSelectorQuery()方法获得组件节点的宽高，并将节点的rpx单位转换成px单位；

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect){
varwidth=rect.width/2//节点的宽度
}).exec()

3.最后，在将获得的节点宽高，使用在画布中便可；

ctx.translate(width,width);

本文来源：https://www.yuntue.com/post/78750.html | 云服务器网，转载请注明出处！