처음에는 미디어 쿼리를 사용하고 싶었지만 미디어 쿼리를 파싱할 때 인식할 수 없었습니다.
@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>
위의 해결 방법은 가로, 세로 화면의 두 가지 변수를 결정하고, 변수에 따라 가장 바깥쪽 스타일을 동적으로 바인딩하고, 화면 크기를 초과하면 중앙에 표시하는 것입니다.