鉴于测试经常会莫名其妙缩放浏览器之后说样式不对, 我决定把浏览器禁用缩放也放在日常工具里, 当然我们做不到真正的禁用缩放, 只是禁用了快捷键、ctrl + 滚轮

方案

  1. js 在 PC 浏览器上做不到真正的禁用缩放, 只是禁用了快捷键，跟ctrl + 滚轮
  2. 如果用户还是在浏览器设置里面操作了缩放，就会有一个提示让测试手动恢复回来，因为js也做不到调整浏览器的缩放
  3. 在移动端上禁止缩放, 只需要在html的head标签里面加上就行了

PC 端

大概就是个这:

  • ctrl配合鼠标滚轮
  • ctrl配合-/+/0进行缩放。
//c1  Ctrl+鼠标滚轮缩放
document.addEventListener('DOMMouseScroll', function (e) {
  //监测滚轮事件中是否按下了Ctrl键
  if (e.ctrlKey) {
   e.preventDefault();
  }
})

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

移动端

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />