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

uni.createMediaQueryObserver([this])

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

this说明：

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

平台兼容性

App	HarmonyOS Next	微信小程序	H5	支付宝小程序	qq小程序	百度小程序	抖音小程序	飞书小程序	360小程序	快应用	元服务	小红书小程序
2.8.12+，app-vue	HBuilderX 4.31	基础库 2.11.1+	√	√	√	√	√	x	√	x	x	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

代码示例

以下示例代码，推荐使用HBuilderX，新建uni-app项目，可直接体验完整示例。

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

<script>
    let landscapeOb
    export default {
        data() {
            return {
                matches: false,
                landscape: false,
                mediaQueryOb: null
            }
        },
        onLoad() {

        },

        // 和 UI 相关的 api 在组件 mountd 后执行
        mounted() {
            this.testMediaQueryObserver()
            this.landscapeObserver()
        },

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

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

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

示例源码如下，请查看 pre > code 标签中的内容

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

<script>
    let landscapeOb
    export default {
        data() {
            return {
                matches: false,
                landscape: false,
                mediaQueryOb: null
            }
        },
        onLoad() {

        },

        // 和 UI 相关的 api 在组件 mountd 后执行
        mounted() {
            this.testMediaQueryObserver()
            this.landscapeObserver()
        },

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

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

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