vue解决PC端等比缩放适配手机端

原创已于 2022-07-05 15:11:45 修改 · 2.6k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#vue等比缩放适配手机端 #vue

于 2022-07-05 14:19:40 首次发布

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种实现手机端网页等比缩放的方法，通过计算设备宽度与设计稿尺寸的比例来调整页面缩放级别，确保不同屏幕尺寸下内容显示的一致性。

在App.vue中

  setup () {
    const bodyScale = () => {
      let devicewidth = document.documentElement.clientWidth//获取当前分辨率下的可是区域宽度
      let scale = devicewidth / 1920 // 分母——设计稿的尺寸
      document.body.style.zoom = scale//放大缩小相应倍数
    }
    onMounted(() => {
      bodyScale()
      window.onresize = () => {
        return (() => {
          bodyScale()
        })()
      }
    })
  }

即可等比缩放适配手机端了