Keyboard shortcuts

Press ← or → to navigate between chapters

Press ? to show this help

Press Esc to hide this help

MediaQueryObserver

MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如界面的长宽是不是在某个指定的范围内。

方法

MediaQueryObserver.observe(Object descriptor, Function callback)

开始监听页面 media query 变化情况

参数
参数类型默认值必填说明
descriptorObject是media query 描述符
callbackFunction是监听 media query 状态变化的回调函数

Object descriptor

属性类型默认值必填说明
minWidthNumber是页面最小宽度( px 为单位)
maxWidthNumber是页面最大宽度( px 为单位)
widthNumber是页面宽度( px 为单位)
minHeightNumber是页面最小高度( px 为单位)
maxHeightNumber是页面最大高度( px 为单位)
heightNumber是页面高度( px 为单位)
orientationString是屏幕方向( landscape 或 portrait )

callback(Object res)

属性类型默认值必填说明
matchesBoolean是页面的当前状态是否满足所指定的 media query

MediaQueryObserver.disconnect()

停止监听。回调函数将不再触发

示例代码:

Page({
  onLoad() {
    const observer = this.createMediaQueryObserver()
    observer.observe({
      orientation: 'portrait'
    }, ({matches}) => {
      console.log('portrait:'+ matches);
    })
  }
})