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

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

 

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

 

以上