uni-app不同设备屏幕适配兼容问题

最新推荐文章于 2023-10-23 10:25:18 发布

小桥小桥

最新推荐文章于 2023-10-23 10:25:18 发布

阅读量2.4k

点赞数

文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/qiaoyin33/article/details/129709099

版权

最小的考虑兼容iphone5，320×568，最大考虑兼容ipad，768×1024；

1.先在mian.js定义变量记录此时屏幕大小

// 引入组件
import uView from "uview-ui";
Vue.use(uView);
Vue.config.productionTip = false;
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// 判断是否是平板
uni.getSystemInfo({
    success: (res)=>{
        console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)
        if(res.windowWidth <= 320){
            Vue.prototype.iphone5 = true
        }else if(res.windowWidth > 500){
            Vue.prototype.pad = true
        }else{
			Vue.prototype.iphone5 = false
			Vue.prototype.pad = false
		}
    }
});

2.动态操作盒子的class

			<view class="item-content">
						<image class="photo" src="../../static/image/homePage/Frame(11).svg"></image>
						<view :class="[iphone5 ? 'item-text-min'  : 'item-text' ]">实时监控</view>
					</view>

3.注意这里需要用一个变量进行接收（兼容小程序端）

<script>
	import tabBar from '@/components/tabbar/tabbar.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				iphone5: this.iphone5
			}
		},
	}
</script>