APP移动端不同屏幕手机之间兼容问题

前提介绍rem.js(vant-ui)

//============rem.js
const baseSize = 75
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 设置页面根节点字体大小(在750的设计稿中量多少px，就在页面css中写多少px,750的时候，为37.5px)
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

想实现的效果

主要的代码

 <div class="manage-wrap">
       <div class="manage-title-wrap">
               经营范围：
        </div>
        <div class="textOver" ref="range">
               {{ this.companylist.businessItems }}
        </div>
           <span class="open" v-if="openFlag" @click="openClick">
               展开全部
               <van-icon name="arrow-down" />
           </span>
           <span class="close" v-if="closeFlag" @click="closeClick">
                收起
               <van-icon name="arrow-up" />
           </span>
  </div>

 data() {
        return {
            openFlag: false,
            closeFlag: false,
        }
    },
  //生命周期 created(请求)----mounted（获取不到请求的数据）----updated(异步数据请求过来了，更新视图)
   watch: {
        companylist: function() {
            this.$nextTick(() => {
                var h = this.$refs.range.offsetHeight //父未设置高度，自动撑开的高度
                var t = 75 * Math.min(document.documentElement.clientWidth / 750, 2)
                // if (h > 45) {  //
                if (h > t * 0.4 * 3) {   //我设置的行高是30px,转换成是0.4rem
                    // 兼容三倍屏幕手机
                    this.$refs.range.setAttribute('class', 'textOVerThree')
                    this.openFlag = true
                    this.closeFlag = false
                } else {
                    this.openFlag = false
                    this.closeFlag = false
                }
            })
        },
    },
  methods: {
        openClick() {
            this.$refs.range.removeAttribute('class')
            this.openFlag = false
            this.closeFlag = true
        },
        closeClick() {
            this.$refs.range.setAttribute('class', 'textOVerThree')
            this.openFlag = true
            this.closeFlag = false
        },
    }

链接: https://blog.csdn.net/weixin_39682560/article/details/111271384.下载个插件
链接: https://blog.csdn.net/qq_43999459/article/details/109693659.获取不到offsetHeight
链接: https://blog.csdn.net/cha1919/article/details/107631856.
链接: https://blog.csdn.net/zhuyuchen321/article/details/81941190?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control.