uniapp不同型号手机适配

ps:拿到手机的高度、宽度、高宽比例，自定义页面模块的高度和间距。

主要代码：

<view class="cono" :style="{height:navHeight3+'rpx'}">
</view>

<view class="banner" v-if="navHeight4==370" style="background:url('../../static/img/baindex_370.png') no-repeat ;height: 180px;background-size:750rpx ;">
</view>

<view class="contt" :style="{backgroundImage: 'url(' + imageURL + ')',
'background-repeat':'no-repeat', backgroundSize:'100% 100%',height:''+mobileHeight+'px'}">
</view>

 

data() {
            return {
                ff: 0,
                heigg: 0,
                pH: 0, //窗口高度
                pW: 0, //窗口宽度
                navHeight5: 0,
                navHeight: 0, //元素的所需高度
                navHeight2: 0,
                navHeight3: 0,
                navHeight4: 0,
                mobileHeight:40, 
                imageURL: '../../static/vip/bg000.png',

            }
},

 

onReady() {
    let that = this;
    uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
                success(res) { //成功回调函数
                    that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
                    // console.log("=======res.windowHeight=======", res.windowHeight)
                    // console.log("=======res.windowWidth=======", res.windowWidth)
                    let xeew = (res.windowHeight / res.windowWidth).toFixed(2)
                    that.heigg = (res.windowHeight / res.windowWidth).toFixed(2)

                    // console.log("=======xeew======", xeew)
                    uni.showToast({
                        icon: 'none',
                        title: xeew,
                    });

                    if (xeew > 2.15) {
                        // console.log("===xeew===ff====", 1)
                        that.ff = 1
                        that._data.navHeight4 = 270
                        that._data.navHeight3 = 461 * 1.15 //中部高度
                        that._data.navHeight2 = 331 * 1.26 //底部高度
                        that._data.navHeight5 = 40 //底部上边距
                    } else if (xeew >= 1.79 && xeew < 2.15) {
                        that._data.navHeight4 = 370
                        that.ff = 2
                        // console.log("===xeew===ff====", 2)
                        that._data.navHeight3 = res.windowHeight / 1.36 //
                        that._data.navHeight2 = res.windowHeight / 1.56
                        that._data.navHeight5 = 40
                    } else if (xeew == 1.78) {
                        // console.log("===xeew===ff====", 3)
                        that.ff = 3
                        that._data.navHeight4 = 170
                        that._data.navHeight3 = 416 //
                        that._data.navHeight2 = 305
                        that._data.navHeight5 = -22
                    } else if (xeew >= 1.75 && xeew < 1.78) {
                        that._data.navHeight4 = 370
                        // console.log("===xeew===ff====", 4)
                        that.ff = 4
                        that._data.navHeight3 = res.windowHeight / 1.41 //
                        that._data.navHeight2 = res.windowHeight / 1.8
                        that._data.navHeight5 = 40
                    } else if (xeew >= 1.7 && xeew < 1.75) {
                        that._data.navHeight4 = 270
                        // console.log("===xeew===ff====", 5)
                        that.ff = 5
                        that._data.navHeight3 = res.windowHeight / 1.31 //
                        that._data.navHeight2 = res.windowHeight / 1.41
                        that._data.navHeight5 = 40
                    } else if (xeew >= 1.44 && xeew < 1.7) {
                        // console.log("===xeew===ff====", 6)
                        that.ff = 6
                        that._data.navHeight4 = 270
                        that._data.navHeight3 = res.windowHeight / 1.31 //
                        that._data.navHeight2 = res.windowHeight / 1.46
                        that._data.navHeight5 = 10
                    } else {
                        // console.log("===xeew===ff====", 7)
                        that.ff = 7
                        that._data.navHeight4 = 270
                        that._data.navHeight3 = res.windowHeight / 1.37 //
                        that._data.navHeight2 = res.windowHeight / 1.59
                        that._data.navHeight5 = 10


                    }
                    /* let titleH = uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
                    titleH.boundingClientRect(data => {
                        let pH = that._data.pH;
                        that._data.navHeight = pH - data.top + 200 //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
                        
                    }).exec() */
                }
     })
},