uni-app不同设备屏幕适配兼容问题_uniapp相同分辨率不同屏幕封装函数适配

最小的考虑兼容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>