浏览器缩放前端处理

如果用户缩放了浏览器，前端页面布局很可能会紊乱，出现横向滚动条或者一些元素掉落等。

缩放的本质

浏览器缩放到底做了些什么呢。本质是调整了屏幕单位物理尺寸可显示的css像素比例：devicePixelRatio。放大的情况下，在dpr为1的屏幕下是让1个css像素大于1个物理像素，dpr为2时，1个css像素大于0.5个物理像素。（这里涉及到各种像素的定义，本人总结的易于理解的说法，但是不够精确）

解决方案

不管用户是手动还是无意间触发到了浏览器的缩放显示功能，如果项目需求需要处理这种场景，我们可以选择的解决方案：

1. 监测到缩放并提示用户
2. 预编码调整布局

方案1：监测到缩放并提示用户

利用缩放改变的主要参数值(window.devicePixelRatio,window.innerWidth)去判断和触发的事件（window.onresize）去监听

在window的resize事件上注册函数，监测dpr是否有改变。

const originDpr = window.devicePixelRatio;