博客

前一阵测试提交故障：在屏幕较小的显示器上，浏览器100%分辨率下页面显示不全，需要通过拖拽的方式才可以显示其余。要求修改成不同尺寸显示器，浏览器100%分辨率情况下页面要展示完整。

我的解决办法如下：

在App.vue文件中，加入以下代码即可：

methods: {
      bodyScale() {
        var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可视区域宽度
        var scale = devicewidth / 1920; // 除以设计稿的尺寸
        document.body.style.zoom = scale; // 放大缩小相应倍数
      }
    },
    created() {
      this.bodyScale()
    },

此外，如果要设计body高度、背景颜色、class等也可以在created统一修改，如下：

methods: {
      bodyScale() {
        var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可视区域宽度
        var scale = devicewidth / 1920; // 除以设计稿的尺寸
        document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
    created() {
      document.body.style.background = '#E9EDF0'
      document.body.className = getLang()
      document.body.style.height = window.innerHeight + 'px'
      this.bodyScale() // 分辨率适配
    },