微信小程序-获取设备宽高

前言

在开发页面的过程中，有些元素或图片内容的宽高不能写死，否则换台设备可能页面就会导致页面乱了特别难看，于是就打算获取设备屏幕的宽高，用获取的数值给元素的宽高赋值，这样哪怕换了设备页面也能正常显示

index.wxml

  
    我在下面
  
  
    
  

index.wxss

.mian{
  width:100%;
  height:100%;
  position:relative;
}
.mainImg{
  position:absolute;
  width:100%;
  z-index:2;
  background-color:green; 
}
.mainText{
  width:100%;
  position:absolute;
  z-index:100;
  background-color:rgba(131,139,139,0.5);
}

index.js

Page({
  data: {
    windowHeight:'',
    windowWidth:''
  },
  getsize(){
    let that=this;
    wx.getSystemInfo({
      success(res) {
        console.log(res)
        console.log("height="+ res.windowHeight)
        console.log("width="+res.windowWidth)
        that.setData({
          windowHeight:res.windowHeight,
          windowWidth:res.windowWidth
        })
      },
    })
  },
  onLoad: function () {
    this.getsize();
  }
})

效果

这里实现的效果是最上层的半透明view根据设备的宽高占满全屏

补充

如果是首页的image图片可能会产生可拖动的情况，添加disableScroll可让页面不可拖动
index.json

{
  "usingComponents": {},
  "disableScroll":true
}