禁用浏览器ctrl +- 缩放、鼠标滚轮缩放、浏览器工具栏+-缩放

  // 禁用浏览器ctrl +- 缩放
const keyCodeMap = { // 91: true, // command 61: true, 107: true, // 数字键盘 + 109: true, // 数字键盘 - 173: true, // 火狐 - 号 187: true, // + 189: true // - } // 覆盖ctrl||command + ‘+’/‘-’ document.onkeydown = function(event) { const e = event || window.event const ctrlKey = e.ctrlKey || e.metaKey if (ctrlKey && keyCodeMap[e.keyCode]) { e.preventDefault() } else if (e.detail) { // Firefox event.returnValue = false } } // 覆盖鼠标滑动
  // 禁用鼠标滚轮缩放 document.body.addEventListener('wheel', (e) => { if (e.ctrlKey) { if (e.deltaY < 0) { e.preventDefault() return false } if (e.deltaY > 0) { e.preventDefault() return false } } }, { passive: false }) // 禁用 浏览器工具栏 点击+- 缩放页面
  // 原理:放大时,devicePixelRatio值会增大,同时等比例缩小zoom值(注意:样式单位不能使用vw、vh适配)
const oldDpr = window.devicePixelRatio window.addEventListener('resize', (e) => { 
  document.querySelector('body').style.zoom = oldDpr * 1 / window.devicePixelRatio
})

  

posted @ 2021-05-27 15:35  FEDeveloper  阅读(1070)  评论(0编辑  收藏  举报