H5页面手机端禁止缩放的正确方式

H5页面禁止手机端缩放是个常见问题了

首先说meta方式

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

这个写法一抓一大把，由于使用之后发现页面变形严重，不少人直接丢弃了该方式，其实是因为width=device-width这一段代码引发的屏幕自适应

 

有些浏览器是强制开启容许缩放的，因而，使用js的方式在必定的延迟以后将该meta写入header中也是一种方法，可是有些浏览器是无效的

 

对于双击放大和双指放大，本质上是一种js，找了很久，找到了使用js禁止的方式，代码以下

禁止双指放大

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

禁止双击放大

var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

该代码是我一个字不差抄下来的。。。

 

该方式在手机端适用良好，而且不影响第三方地图的缩放，建议使用

 

以上