前端适配笔记本缩放125%,150%导致页面错乱问题

由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。
如果页面比较简单就让多余的空白单边扩展,这样可以不受影响,但是如果页面遍布了引入的其他组件,就不好控制位置和大小了。
我去搜了一下,基本都是根据 window.screen.availHeight 来获取屏幕缩放比例,
window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%, 还有使用媒体查询的,直接拷贝过去试了一下一点用没有,但是我说明一下,这个肯定是一种解决方式,只是我仔细去研究,其他的同理,用了一下没有效果,

想着显示设备应该都有devicePixelRatio这个属性把,于是打印了一下还真有,就去搜了相关,直接获取devicePixelRatio
,因为屏幕是可以缩放的,所以直接 1/devicePixelRatio就可以解决屏幕任意缩放了而现实内容固定了,如下:

我用的是vue,所以我把它加在了app.vue下的

export default {
  name: 'App',
  created () {
    const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    if (devicePixelRatio !== 1) {
      // 老ie可以提示
      if (!! window.ActiveXObject || 'ActiveXObject' in window) {
        alert('balabala,去用chrome吧')
      } else {
        const c = document.querySelector('body')
        c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
      }
    }
  }
}

备注:这里是屏幕任意缩放,不能是浏览器任意缩放,浏览器缩放会导致所有内容同时变大或变小,
但是浏览器和屏幕是可以互相中和的,举个例子,笔记本屏幕方法150%,那么浏览器一定是缩放2/3时可以显示原始的页面,因为他们共同影响页面元素的。

那么如何实现浏览器随意缩放,而页面内容自动适应屏幕大小呢?

上代码:

export default {
  name: 'App',
  created () {
    this.$nextTick(() => {
      this.resizeFun()
      window.addEventListener('resize', this.resizeFun)
    })
  },
  methods: {
    resizeFun () {
      const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
      if (devicePixelRatio !== 1) {
        // 如果在笔记本中用IE浏览器打开 则弹出提示
        if (!! window.ActiveXObject || 'ActiveXObject' in window) {
          alert('balabala。。。')
        } else {
          const c = document.querySelector('body')
          c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
        }
      }
    }
  }
}

这种实现方式相当于在页面创建后就给他bind了resize的方法,每次变更时自动调用调整页面缩放比例的方法resizeFun, 这样就解决了缩放浏览器或者页面时页面内容不会错乱问题

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端适配笔记本缩放125%,150%导致页面错乱问题

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买