js禁止浏览器默认的缩放
禁止浏览器缩放
移动端
html
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
IOS 新版本已经无法通过user-scalable=no来阻止浏览器缩放了
PC 端
ts
function evtCall(event: Event) {
const keyboardEvt = event as KeyboardEvent
// 禁止键盘快捷键+鼠标滚动对浏览器界面进行缩放
if (keyboardEvt.ctrlKey === true || keyboardEvt.metaKey) {
event.preventDefault()
}
}
function keyCall(event: KeyboardEvent) {
// 禁止通过纯键盘快捷键对浏览器界面进行缩放
if ((event.ctrlKey === true || event.metaKey === true) && (event.key === '=' || event.key === '-')) {
event.preventDefault()
}
}
window.removeEventListener('keydown', keyCall)
window.removeEventListener('mousewheel', evtCall)
window.removeEventListener('DOMMouseScroll', evtCall)
window.addEventListener('keydown', keyCall, { passive: false })
window.addEventListener('mousewheel', evtCall, { passive: false })
//firefox
window.addEventListener('DOMMouseScroll', evtCall, { passive: false })
判断 pc 浏览器是否缩放
js
// 判断pc浏览器是否缩放，若返回100则为默认无缩放，如果大于100则是放大，否则缩小
function detectZoom() {
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase()
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio
} else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI
}
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth
}
if (ratio) {
ratio = Math.round(ratio * 100)
}
return ratio
}
PC 端实现鼠标滚轮对图片的放大缩小
鼠标滚轮实现图片的放大缩小有个前提，必须先禁止浏览器默认的放大缩小
ts
let scale = 1
imgDom.onwheel = (e: WheelEvent) => {
// @ts-ignore
if (e.wheelDelta > 0) {
scale += 0.05
} else {
scale -= 0.05
}
if (scale < 0.5) {
scale = 0.5
}
imgDom.style.transform = `scale(${scale})`
}