最近项目做的是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>