禁止手机端浏览器双击放大功能

编程入门行业动态更新时间:2024-10-08 20:29:02

记录一下啊
今天客户提要求手机浏览器打开网页时要禁止双击放大页面（Google）！！！
然后在网上找到了很多但都没有效果，比如：

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

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

上述均无效（可能是自己没用好吧）！！！

后来找到了一个js（成功解决）如下：

// 禁用双击放大
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
	var now = Date.now();
	if (now - lastTouchEnd <= 300) {
		event.preventDefault();
	}
	lastTouchEnd = now;
}, {
	passive: false
 
});