MediaQueryObserver
MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如界面的长宽是不是在某个指定的范围内。
方法
MediaQueryObserver.observe(Object descriptor, Function callback)
开始监听页面 media query 变化情况
参数
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
descriptor | Object | 是 | media query 描述符 | |
callback | Function | 是 | 监听 media query 状态变化的回调函数 |
Object descriptor
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
minWidth | Number | 是 | 页面最小宽度( px 为单位) | |
maxWidth | Number | 是 | 页面最大宽度( px 为单位) | |
width | Number | 是 | 页面宽度( px 为单位) | |
minHeight | Number | 是 | 页面最小高度( px 为单位) | |
maxHeight | Number | 是 | 页面最大高度( px 为单位) | |
height | Number | 是 | 页面高度( px 为单位) | |
orientation | String | 是 | 屏幕方向( landscape 或 portrait ) |
callback(Object res)
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
matches | Boolean | 是 | 页面的当前状态是否满足所指定的 media query |
MediaQueryObserver.disconnect()
停止监听。回调函数将不再触发
示例代码:
Page({
onLoad() {
const observer = this.createMediaQueryObserver()
observer.observe({
orientation: 'portrait'
}, ({matches}) => {
console.log('portrait:'+ matches);
})
}
})