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

qin.createMediaQueryObserver([this])

创建并返回一个 MediaQueryObserver 对象实例。

this说明：

自定义组件实例。小程序端不支持此参数，传入仅为抹平写法差异

平台兼容性

H5	微信小程序	小红书小程序	百度小程序	抖音小程序	飞书小程序
√	基础库 2.11.1+	√	√	√	x

注意：支付宝小程序、qq小程序、百度小程序、抖音小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。

MediaQueryObserver 对象的方法列表

tips: 和 UI 相关的 api 在组件 mounted 后执行

方法	说明
MediaQueryObserver.observe(Object descriptor, function callback)	开始监听页面 media query 变化情况
MediaQueryObserver.disconnect()	停止监听，回调函数将不再触发

Object descriptor

属性名	类型	默认值	必填	说明
minWidth	number		否	页面最小宽度（ px 为单位）
maxWidth	number		否	页面最大宽度（ px 为单位）
width	number		否	页面宽度（ px 为单位）
minHeight	number		否	页面最小高度（ px 为单位）
maxHeight	number		否	页面最大高度（ px 为单位）
height	number		否	页面高度（ px 为单位）
orientation	string		否	屏幕方向（ landscape 或 portrait ）

observe 回调函数包含一个参数

参数	类型	说明
matches	boolean	页面的当前状态是否满足所指定的 media query

代码示例

Vue

<template>
  <view class="content">
    <view>
      要求页面最小宽度 375px， 且页面宽度最大 500px，是否匹配: {{matches}}
    </view>
    <view>
      要求屏幕方向为纵向，是否匹配: {{landscape}}
    </view>
  </view>
</template>

<template>
  <view class="content">
    <view>
      要求页面最小宽度 375px， 且页面宽度最大 500px，是否匹配: {{matches}}
    </view>
    <view>
      要求屏幕方向为纵向，是否匹配: {{landscape}}
    </view>
  </view>
</template>

Script

<script>
  let theLandscapeOb;
  export default {
    data() {
      return {
        matches: false,
        landscape: false,
        mediaQueryOb: null,
      };
    },
    // 和 UI 相关的 api 在组件 mountd 后执行
    mounted() {
      this.testMediaQueryObserver();
      this.landscapeObserver();
    },

    methods: {
      testMediaQueryObserver() {
        this.mediaQueryOb = qin.createMediaQueryObserver(this)

        this.mediaQueryOb.observe({
          minWidth: 375,  //页面最小宽度 375px
          maxWidth: 500  //页面宽度最大 500px
        }, (theMatches) => {
          this.matches = theMatches;
        })
      },
      landscapeObserver() {
        theLandscapeOb = qin.createMediaQueryObserver(this)
        theLandscapeOb.observe({
          // 屏幕方向为纵向
          orientation: 'landscape',
        }, (theMatches) => {
          this.landscape = (theMatches);
        })
      },
      destroyed () {
        // 组件销毁时停止监听
        this.mediaQueryOb.disconnect();
        theLandscapeOb.disconnect();
      }
    }
  }
</script>

<script>
  let theLandscapeOb;
  export default {
    data() {
      return {
        matches: false,
        landscape: false,
        mediaQueryOb: null,
      };
    },
    // 和 UI 相关的 api 在组件 mountd 后执行
    mounted() {
      this.testMediaQueryObserver();
      this.landscapeObserver();
    },

    methods: {
      testMediaQueryObserver() {
        this.mediaQueryOb = qin.createMediaQueryObserver(this)

        this.mediaQueryOb.observe({
          minWidth: 375,  //页面最小宽度 375px
          maxWidth: 500  //页面宽度最大 500px
        }, (theMatches) => {
          this.matches = theMatches;
        })
      },
      landscapeObserver() {
        theLandscapeOb = qin.createMediaQueryObserver(this)
        theLandscapeOb.observe({
          // 屏幕方向为纵向
          orientation: 'landscape',
        }, (theMatches) => {
          this.landscape = (theMatches);
        })
      },
      destroyed () {
        // 组件销毁时停止监听
        this.mediaQueryOb.disconnect();
        theLandscapeOb.disconnect();
      }
    }
  }
</script>

Style

<style>
  .content {
    text-align: center;
    height: 400rpx;
  }
</style>

<style>
  .content {
    text-align: center;
    height: 400rpx;
  }
</style>