14寸笔记本电脑,分辨率为:2240*1400 放大到150% 如何自适应页面 和echarts

176 阅读1分钟

第一时间会想到css的媒体查询,感觉太麻烦了.....瞬间就想放弃,让用户把笔记本分辨率一调,卧槽领导不同意,,,说是虽然工资发不起,但你这活干的也太没法发的起了吧....言归正传

原来就几行代码搞定:

//解决 笔记本屏幕显示缩放比例125%,150%对页面布局的影响 (放在全局/整改系统会被放大100%)

 const detectZoom = () => {
      let ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return ratio;
    };
    const m = detectZoom();
    document.body.style.zoom = 100 / Number(m);