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

本文介绍: 有个需求要让不同分辨率都适配到1080P的效果，以15.6寸1080P笔记本为例，页面缩放默认一般是125%，要显示真正的1080P一般是调整浏览器缩放80%（Edg e），也有部分浏览器默认时125%则缩放到100%。那么能不能通过CSS实现？我看到主流的处理方法是：确实可以达到效果，但是当使用Echar t、Elem ent部分组件时，会出现鼠标定位偏移问题，我就不列举了，因为能查到这里一般是遇到了问题的。那么有没有平替方案呢？当然有：我们通过 scale 实现的效果和zoom几乎一模一样，同时避免了

有个需求要让不同分辨率都适配到1080P的效果，以15.6寸1080P笔记本为例，页面缩放默认一般是125%，要显示真正的1080P一般是调整浏览器缩放80%（Edg e），也有部分浏览器默认时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);
  }

方案二、对Ech ar ts 组件进行处理

由于Ech a rts组件都是通过 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}');
  }