文章来自:源码在线https://www.shengli.me/wxxcx/129.html

显示区域尺寸

 

显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。

从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 "resizable": true 。

 

示例:

响应显示区域变化wxs

 

如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。

 

Media Query

有时,对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。

代码示例:

响应显示区域变化wxs

屏幕旋转事件

 

有时,仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。

在 js 中读取页面的显示区域尺寸,可以使用 selectorQuery.selectViewport 。

页面尺寸发生改变的事件,可以使用 wx.onWindowResize 来监听。回调函数中将返回显示区域的尺寸信息。

 

代码:

 响应显示区域变化wxs

 

相关文章:

  • 2022-12-23
  • 2021-10-23
  • 2022-01-08
  • 2022-12-23
  • 2022-12-23
  • 2021-07-05
  • 2021-07-05
  • 2021-12-04
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-18
  • 2021-11-07
  • 2021-07-08
  • 2021-11-25
  • 2022-01-16
相关资源
相似解决方案