微信小程序如何获取屏幕高度和宽度

转载于 2019-07-16 17:05:59 发布 · 1.2k 阅读

9 篇文章

订阅专栏

本文介绍两种实现页面布局自适应的方法：一种使用JavaScript通过`wx.getSystemInfoSync()`获取窗口尺寸；另一种利用CSS3的`vw`和`vh`单位实现响应式设计。这两种方法有助于开发者根据不同设备屏幕大小调整网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一
onLoad: function () {
   this.setData({
     height: wx.getSystemInfoSync().windowHeight,
     width: wx.getSystemInfoSync().windowWidth
   })
 }

方法二
.index{
   height: 100vh;
   width: 100vw;
}
# CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 
# "vw" = "view width"  "vh" = "view height"