uniapp微信小程序怎样获取宽高？获取系统信息？微信小程序获取用户手机屏幕高度与宽度信息等

最新推荐文章于 2024-04-11 11:47:05 发布

南北极之间

最新推荐文章于 2024-04-11 11:47:05 发布

阅读量3.3k

点赞数 1

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_22182989/article/details/124820273

版权

小程序专栏收录该内容

49 篇文章 4 订阅

订阅专栏

第一种方案（推荐）

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

————————————————
资料：

微信小程序获取用户手机屏幕高度与宽度_DHLSP2022的博客-CSDN博客_小程序获取屏幕高度https://blog.csdn.net/DHLSP15/article/details/118191681