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

小程序

1307

2020/12/30 17:54:23

栏目: 云计算

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

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

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);

最新知识库