微信小程序 - 获取用户手机屏幕高度与宽度(两种方案)

    科技2025-11-15  5

    前言

    有时候我们需要获取用户手机屏幕高度或宽度来完成一些界面表现,具体请看代码。

    第一种方案(推荐)

    "vw" = "view width" "vh" = "view height"

    使用 CSS3 引入的 vw / vh 基于宽度/高度相对于窗口大小。

    /* 元素根据手机屏幕宽高占位100% */ .view { height: 100vh; width: 100vw; }

    第二种方案

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

    使用微信小程序提供的 API 来获取窗口大小,具体看文档。

    onLoad: function () { this.setData({ height: wx.getSystemInfoSync().windowHeight, width: wx.getSystemInfoSync().windowWidth }) }
    Processed: 0.012, SQL: 8