全局添加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来适配；
弊端：不精确

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！