移动端阻止浏览器页面缩放(safari也好使)
正常阻止页面缩放,从head标签里设置meta就好了
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
但是有些浏览器(比如 safari)即使设置了meta也不生效,那就添加这段js
window.onload = function() {
var lastTouchEnd = 0;
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
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();
});
document.addEventListener('dblclick', function (event) {
event.preventDefault();
})
}
以上方式可以很好阻止静态页面缩放,
基本可以满足需求,
但是如果你一个手指滑动滚动条的同时另一个手指放上去进行缩放就不行了,
搜索了一些帖子也没有很好的解决方案,如果你有完美的解决方案请留言,谢谢!