h5禁用手机input点击放大

最近项目做的是h5的手机移动端,在用苹果浏览器测试时,弹出框输入信息会自动拉伸屏幕,并且不会像安卓一样回来。

网上查找说设置浏览器自适应头,但是并没有效果,

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

后来看到一篇禁用事件,于是我尝试了一下解决了问题,在此记录一下。

由于用的vue.js,可以在idnex.html界面禁掉缩放事件,

<script>
	window.onload = function () {
		document.addEventListener('gesturestart', function (e) {
			e.preventDefault();
		});
		document.addEventListener('dblclick', function (e) {
			e.preventDefault();
		});
		document.addEventListener('touchstart', function (event) {
			if (event.touches.length > 1) {
				event.preventDefault();
			}
		});
		var lastTouchEnd = 0;
		document.addEventListener('touchend', function (event) {
			var now = (new Date()).getTime();
			if (now - lastTouchEnd <= 300) {
				event.preventDefault();
			}
			lastTouchEnd = now;
		}, false);
	};
</script>

  

原文地址:https://www.cnblogs.com/reject-ant/p/10231682.html