vue-008-如何做到在不同尺寸显示器，浏览器100%分辨率下，页面完整展示

qinshanmaoli

于 2023-02-11 13:41:46 发布

阅读量515

点赞数

分类专栏： WEB 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/sunqinshan/article/details/128982930

版权

WEB 专栏收录该内容

9 篇文章

订阅专栏

文章介绍了一种方法来处理在小屏幕显示器上，浏览器100%分辨率下页面无法完全显示的问题。通过在App.vue文件中添加代码，动态调整body的缩放比例，确保不同尺寸显示器下页面能完整展示。同时，还提到了可以统一修改body的高度、背景颜色和class。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一阵测试提交故障：在屏幕较小的显示器上，浏览器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() // 分辨率适配
    },

转自