浏览器缩放监听

这里的缩放不是指 resize 事件（改变浏览器窗口大小），而是指浏览器本身的缩放功能，一般使用以下方式进行缩放：

• ctrl 配合鼠标滚轮
• ctrl 配合 -/+/0 进行缩放。

虽然没有专门的缩放事件，但是可以通过监听以上两种缩放操作事件进行达到“监听”缩放的目地：

• Ctrl+ 鼠标滚轮缩放：监听 DOMMouseScroll 并判断是否触发了 ctrl 按键
• 键盘快捷键缩放：监听 keydown 并判断按键是否是三种缩放操作的任一一种组合

//  Ctrl+ 鼠标滚轮缩放
document.addEventListener('DOMMouseScroll', function (e) {
  // 监测滚轮事件中是否按下了 Ctrl 键
  if (e.ctrlKey) {//xxx}
})

//c2   键盘快捷键缩放
document.addEventListener('keydown', function (e) {
  // 按下 Ctrl 以及以下任意一键：+ - 或 0
  if (e.ctrlKey && (e.code === 'Equal' || e.code === 'Minus' || e.code === 'Digit0')) {xxx}
})

其他相关提示：

• 浏览器缩放后，documentElement.scrollWidth 等值（上面代码中的 viewportWidth，当然该名字可能不严谨）会与缩放比例成 反比 变化
• 获取缩放比例：window.devicePixelRadio