设置小程序页面适应多种屏幕尺寸的方法
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) { var width = rect.width/2 // 节点的宽度
}).exec()
3.最后,在将获取的节点宽高,使用在画布中即可;
ctx.translate(width, width);
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
推荐阅读:小程序如何适配不同尺寸的屏幕