zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Java基础
    数据库表设计
    Spring循环依赖
    Mysql类型转换
    Mysql刷题
    JavaScript
    Git
    告别.NET生成报表统计图的烦恼
    JS给页面标签添加事件(或超链接链接)
    发现联想手机P630型号的一个严重的系统Bug
  • 原文地址:https://www.cnblogs.com/reject-ant/p/10231682.html
Copyright © 2011-2022 走看看