第一种方案(推荐)
"vw" = "view width"
"vh" = "view height"
使用 CSS3 引入的 vw / vh 基于宽度/高度相对于窗口大小。
/* 元素根据手机屏幕宽高占位100% */
.view {
height: 100vh;
width: 100vw;
}
第二种方案
使用微信小程序提供的 API 来获取窗口大小,具体看文档。
微信原生小程序:
onLoad: function () {
this.setData({
height: wx.getSystemInfoSync().windowHeight,
width: wx.getSystemInfoSync().windowWidth
})
}
uniapp:
uni.getSystemInfo(OBJECT) | uni-app官网https://uniapp.dcloud.io/api/system/info.html
#uni.getSystemInfo(OBJECT)
获取系统信息。
uni.getSystemInfo({
success: res => {
this.pageHeight = res.windowHeight
this.pageWidth = res.windowWidth
}
})
uni.getSystemInfoSync()
获取系统信息同步接口。同上getSystemInfo
。
const res = uni.getSystemInfoSync();
console.log(res.model);
console.log(res.pixelRatio);
console.log(res.windowWidth);
console.log(res.windowHeight);
console.log(res.language);
console.log(res.version);
console.log(res.platform);
————————————————
资料: