求问微信小程序怎么获取屏幕大小？

时间：2023-07-01 14:05 阅读数：108 人阅读分类：知识百科

　　目前，微信小程序大家使用的比较多，其中的组件image是用来显示图片，可是我们在做一些商品详情页图片的时候，由于image有默认固定的宽度和高度，就需要image自适应屏幕，严重影响了工作效率。那么微信小程序如何获取屏幕大小开?小编今天就教大家屏幕大小如何获取。

　　微信小程序如何获取屏幕大小开源代码：

　　方法1：

　　[javascript] view plain copyimageLoad: function () {

　　this.setData({

　　imageWidth: wx.getSystemInfoSync().windowWidth

　　})

　　}

　　方法2：

　　[css] view plain copy.imgClass{

　　width: 100vw;

　　}

　　CSS3引入的”vw”和”vh”基于宽度/高度相对于窗口大小

　　”vw”=”view width”“vh”=”view height”

　　以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。

　　[css] view plain copy.demo {

　　width: 100vw;

　　font-size: 10vw; /* 宽度为窗口100%，字体大小为窗口的10% */

　　}

　　.demo1 {

　　width: 80vw;

　　font-size: 8vw; /* 宽度为窗口80%，字体大小为窗口的8% */

　　}

　　.demo2 {

　　width: 50vw;

　　font-size: 5vw; /* 宽度为窗口50%，字体大小为窗口的5% */

　　}

　　.demo3 {

　　width: 10vw;

　　height: 50vh; /* 宽度为窗口10%，容器高度为窗口的50% */

　　}

　　微微风提醒，Android的小程序开发时，同样也会遇到图片等比例缩放的问题。图片等比例缩放应该是以用图片宽高比和屏幕宽高比做判断。希望这篇文章能解决你的问题，如果你在微信小程序开发过程中遇到屏幕类型问题都可以来本站了解更多解决办法！