我们写移动端网页开发的时候肯定会碰到这个问题,在网页端,页面是可以缩放的,这个是默认的行为。想要禁止这种默认行为在项目中添加如下代码:
我的vue项目,在index.html添加一行meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
然后在app.vue里面添加如下代码:
<script>
//禁止默认拖动缩放
window.onload = function() {
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault()
}
})
document.addEventListener('gesturestart', function(event) {
event.preventDefault()
})
var lastTouchEnd=0;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
</script>
基本上能解决问题,但是强制缩放还是禁止不了。。。