正文
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);
该代码是我一个字不差抄下来的。。。
该方式在手机端适用良好，并且不影响第三方地图的缩放，建议使用
以上
