全局添加zoom CSS属性

背景：
本人在一次项目中 产品提的一个需求如下：
产品觉得页面铺的太满 对于1600-1200尺寸屏幕下的用户不太友好，于是希望前端能对这类用户做一个缩放的处理，于是就使用了zoom：0.9对页面进行的处理代码如下：
对全局布局添加了一个zoom:0.9的处理

 initZoomGet() {
        const currentId: any = document.getElementById('app');
        const currentResolution: number = screen.width;
        const currentScreenWidth: number = document.documentElement.clientWidth;
        if (currentResolution > 1080 && (currentScreenWidth > 1200 && currentScreenWidth < 1500)) {
            currentId.style.cssText = 'zoom:0.9';
            sessionStorage.setItem('ZOOMVALUE', '0.9');
        } else {
            currentId.style.cssText = 'zoom:1';
            sessionStorage.setItem('ZOOMVALUE', '1');
        }
        console.log(currentScreenWidth);
        console.log(currentId.style.cssText);
    }

于是乎就出现了以下bug 由于是公司项目就不截图了
一：
element-ui 一切关于悬浮提示栏的组件全部位置出现偏移。
原因：zoom属性添加到body身上：elementUi组件是插在html标签上的 所以element的组件是以html为父级做定位，而body是自身缩放 所以导致定位不正确。
解决方法：

1. 手写组件
2. el-cascader使用:append-to-body=“false”
3. el-select 使用:append-to-body=“false”

二：
getBoundingClientRect() 属性的计算也出现了偏差。
解决方法：在基础*0.8来适配；
弊端：不精确