求问微信小程序怎么获取屏幕大小?_微微风

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

2018-02-04 23:53:12 39 0

  目前,微信小程序大家使用的比较多,其中的组件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的小程序开发时,同样也会遇到图片等比例缩放的问题。图片等比例缩放应该是以用图片宽高比和屏幕宽高比做判断。希望这篇文章能解决你的问题,如果你在微信小程序开发过程中遇到屏幕类型问题都可以来本站了解更多解决办法!

  相关阅读:

  微信小程序获取屏幕高度怎么操作?

  怎么利用微信分享屏幕呢

  微信屏幕怎么设置成横屏


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

发布:2018-02-04 23:53:12来源:小花阅读:39

  目前,微信小程序大家使用的比较多,其中的组件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的小程序开发时,同样也会遇到图片等比例缩放的问题。图片等比例缩放应该是以用图片宽高比和屏幕宽高比做判断。希望这篇文章能解决你的问题,如果你在微信小程序开发过程中遇到屏幕类型问题都可以来本站了解更多解决办法!

  相关阅读:

  微信小程序获取屏幕高度怎么操作?

  怎么利用微信分享屏幕呢

  微信屏幕怎么设置成横屏


发表评论
微微风
昵称

分类导航

公众号小程序微信群微信运动微信红包微信聊天微信好友朋友圈

精选微信公众号素材

更多

最新最全的微信公众号求关注图片(附下载)

1

微信公众号求关注素材哪里找?

2

微信朋友圈视频软件推荐!怎么制作高大上微信朋友圈视频?

3

2017年微信引导分享动态图精选!

4

最新微信引导关注动图大全!

5

最新公众号阅读原文动态图素材

6

最新微信底部扫码关注模板

7

最新微信公众号求关注图标大全

8

最新微信关注我们动态图素材

9

点击按钮关注公众号,点击按钮关注公众号图片素材

10

最近更新

更多
1微信小程序中成语消消看第17关的答案是什么呢?
2小程序介绍到底是什么?什么是小程序?
3微信娱乐小程序是什么?有哪些微信娱乐小程序?
4从哪里可以找到小程序?有什么方法可以找到微信小程序?
5支付宝小程序营运规范是什么?支付宝运营需要注意什么?
6小程序怎样提交代码呢?具体步骤是什么?
7小程序能不能推广?应该怎样推广?
8应该怎么投诉小程序?为什么呢?
9违规的小程序被封停的话该怎么办呢?
10小程序头脑王者因违规暂停服务该如何处理?

猜你喜欢

小程序 | 微信跳一跳怎么得高分?
小程序 | 跳一跳别人跳几千下怎么来的?
小程序 | 跳一跳外挂怎么用?
小程序 | 跳一跳奖励盒子怎么拿分?
小程序 | 微信跳一跳加分奖励是什么?
小程序 | 跳一跳黑科技怎么用?
小程序 | 微信游戏刷分教程
小程序 | 微信为什么打开就跳掉?
小程序 | 超级跳跳跳攻略!超级跳跳跳怎么玩?
小程序 | 跳一跳够得着怎么玩?