前端CSS/JS页面缩放，解决zoom导致Echarts鼠标定位偏移。

NA_coder

已于 2023-04-14 14:49:44 修改

阅读量1w

点赞数 7

文章标签： css javascript 前端 echarts

于 2022-12-06 15:01:47 首次发布

本文链接：https://blog.csdn.net/LP_Reed/article/details/128202856

版权

有个需求要让不同分辨率都适配到1080P的效果，以15.6寸1080P笔记本为例，页面缩放默认一般是125%，要显示真正的1080P一般是调整浏览器缩放80%（Edge），也有部分浏览器默认时125%则缩放到100%。

那么能不能通过CSS实现？主流的处理方法是：

  body {
    zoom: 0.8;
  }

确实可以实现缩放效果，但是当页面中存在Echarts组件时，Echarts组件部分会出现鼠标定位偏移问题，一般有以下两种处理方案：

方案一、改用scale替代zoom

固定比例缩放，通过CSS实现：

  body {
    transform: scale(0.8);
    transform-origin: 0px 0px;
    width: 125%;
    height: 125%;
  }

计算比例缩放，需要JS实现：

  // body自动缩放
  function bodySize () {
    var size = window.screen.height / 1080;
    var size2 = 100 / size + '%';
    $('body').css('transform', 'scale(' + size + ')');
    $('body').css('transform-origin', '0 0');
    $('body').css('width', size2);
    $('body').css('height', size2);
  }

方案二、对Echarts组件进行处理

由于Echarts组件都是通过canvas渲染的，所以可以直接对canvas进行处理。如果页面存在其他canvas无需缩放，也可改用其他选择器。

固定比例缩放，通过CSS实现：

  body {
    zoom: 0.8;
  }

  canvas {
    zoom: 1.25;
    transform: scale(0.8);
    transform-origin: 0px 0px;
  }

计算比例缩放，需要JS实现：

  // body自动缩放
  function bodySize () {
    var size = window.screen.height / 1080;
    $('body').css('zoom', size);
    // 处理缩放导致canvas定位异常
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / size + '}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + size + ')}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
  }