uniapp 适配pad大屏

刚开始想用媒体查询，但是解析媒体查询识别不出来

@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2){
}
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio:3){
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio:3){
}

如果用下面的方法,则控制不住,方法都会走:
@media only screen and (max-width: 375px) and (max-height: 667px) {
}
@media only screen and (max-width: 414px) and (max-heigh: 736px){
}
@media only screen and (max-width: 375px) and (max-heigh: 812px){
}

这种没试出来

然后发现一种新的方案：

<template>
    <view class="content" :class="{'hengBox': matches, 'shuBox':landscape }">
        <view class="">
            要求页面最小宽度 375px， 且页面宽度最大 500px，是否匹配: {{matches}}
        </view>
        <view>
            要求屏幕方向为纵向，是否匹配: {{landscape}}
        </view>
				<button type="default" @click="goHome()">点击home</button>
    </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: {
					goHome(){
						uni.switchTab({
							url: '../home/index'
						})
					},
            testMediaQueryObserver() {
                this.mediaQueryOb = uni.createMediaQueryObserver(this)
                this.mediaQueryOb.observe({
                    minWidth: 375,  //页面最小宽度 375px
                    maxWidth: 960  //页面宽度最大 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;
    }
		.hengBox{
			background-color: #DD524D;
		}
		.shuBox{
			width: 960px;
			margin: 0 auto;
			background-color: #007AFF;
		}
</style>

上面这种方案就是判断横屏竖屏的两个变量 根据变量动态绑定最外层的样式，屏幕超出时居中展示