如果用户缩放了浏览器,前端页面布局很可能会紊乱,出现横向滚动条或者一些元素掉落等。
缩放的本质
浏览器缩放到底做了些什么呢。本质是调整了屏幕单位物理尺寸可显示的css像素比例:devicePixelRatio。放大的情况下,在dpr为1的屏幕下是让1个css像素大于1个物理像素,dpr为2时,1个css像素大于0.5个物理像素。(这里涉及到各种像素的定义,本人总结的易于理解的说法,但是不够精确)
解决方案
不管用户是手动还是无意间触发到了浏览器的缩放显示功能,如果项目需求需要处理这种场景,我们可以选择的解决方案:
- 监测到缩放并提示用户
- 预编码调整布局
方案1:监测到缩放并提示用户
利用缩放改变的主要参数值(window.devicePixelRatio
,window.innerWidth
)去判断和触发的事件(window.onresize
)去监听
在window的resize事件上注册函数,监测dpr是否有改变。
const originDpr = window.devicePixe