vue 项目适配笔记本1920*1080 125%缩放

前言

• 在台式机上开发pc端项目时，由于是1920*1080的分辨路和100缩放，看起来是没有问题。在笔记本上有问题

• 因为现在很多14寸的笔记本，出厂默认就是125%或150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。

• 网上有很多解决方案，但都是治标不治本，表面上是适配了，但是有很多坑。效果不是很好。

• 比如布局挤变形了，第三方组件变形，按钮错位，部分白屏，执行不了。看着很不舒服。

网上解决方案-可以先试一下看效果

vue项目下，笔记本显示跟PC显示比例为125%、150%对页面造成的影响_一起搞前端的博客-CSDN博客

解决前端页面在笔记本和台式显示器比例大小不一问题（适配笔记本125% 150%缩放解决方法）_@小匠的博客-CSDN博客_笔记本设置了缩放,前端如何适配

禁止web页面缩放解决方案 - 掘金

笔记本默认设置125%或者150%缩放，导致布局错乱的解决方法 - 孙凯亮 - 博客园

我的解决方案-思路

1.笔记本缩放（125%或150%）本质是看起来舒服，但实际是更改了视口大小--就是要适配不同分辨率屏幕

2.尽量使用100%布局，这样不管视口分辨路怎么变都是从100里面分，不会受到影响

3.行内样式不会生效，像element-ui表格设置height如果是px就会把页面撑变形，改成父元素的%比（比如50%）

4.如果项目中有使用canvas或者别的相关技术，就要在这个页面监听浏览器是否缩放，来改变大小。

5.最后直接把屏幕在设置中调成125%或150%，来看效果，直接适配

实现

1.适配不同分辨率屏幕--主页文章有[Vue pc端适配不同分辨率屏幕]

 

2.根据实际情况，编写样式

3.修改表格之内的行高(height="70%") 父级元素要设置高，要不然没效果

<el-table
      :data="tableData"
      height="70%"
      border
      style="width: 100%; margin: 20px 0 30px"
      size="mini"
    >

4.在有用到canvas技术的页面监听浏览器缩放，条件成立就是浏览器缩放，给他开关打开，改变canvas大小

 return {
      // 笔记本开关
      windowlen: false,
      // 监听是否在笔记本上-监听浏览器
      screenWidth: document.body.clientWidth,
    }
    
 watch: {
    // 监听是否在笔记本上-监听浏览器
    screenWidth: {
      immediate: true,
      handler: function (newVal) {
        console.log('浏览器大小', newVal)
        if (newVal != 1920) {
          console.log('执行了', newVal != 1980)
          this.windowlen = true
        }
      }
    }
  },
  mounted() {
  // 监听是否在笔记本上-监听浏览器
    const that = this
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      }
    }
  },
  beforeDestroy() {
    // 离开页面是清空
    this.windowlen = false
  },
  
  // 判断笔记本上运行
      if (this.windowlen) {
        console.log('笔记本浏览', this.windowlen)
        // 注意不要加px
        this.canvas.width = 780
        this.canvas.height = 435
      }

5.把屏幕调成125%缩放，完成其他细节。150%缩放同理。

---

总结：

经过这一趟流程下来相信你也对 vue 项目适配笔记本1920*1080 125%缩放 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕