微信小程序 - 获取用户手机屏幕高度与宽度(两种方案) - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2020-10-8

发布人:葵宇科技

浏览次数:425

前言

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

第一种方案(推荐)

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

相关案例查看更多