移动端 H5 禁止缩放
Posted on: 2021年1月21日 at 19:22
这是一篇发布于 373 天以前的旧文,其中的部分内容可能已经过时。
在 <head>
头中添加 meta
标签
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
iOS 在某些情况下 meta
标签不生效
<meta />
标签不生效的话,可以尝试添加下边的 js 代码:
// 缩放
try {
// 禁用双击缩放
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault()
}
})
var lastTouchEnd = 0
document.addEventListener(
'touchend',
function (event) {
var now = new Date().getTime()
if (now - lastTouchEnd <= 300) {
event.preventDefault()
}
lastTouchEnd = now
},
false,
)
// 禁用双指手势操作
document.addEventListener('gesturestart', function (event) {
event.preventDefault()
})
} catch (error) {}