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);

該代碼是我一個字不差抄下來的。。。

 

該方式在手機端適用良好，而且不影響第三方地圖的縮放，建議使用

 

以上