今天碰到一个问题,由于没有使用移动端原生键盘,自己写了个键盘。导致在H5页面如果快速点击在IOS系统上会页面放大。而产品经理又必须要自制键盘,所以找了半天终于找到2种禁止IOS缩放的办法
- 利用判断两次按下时间间隔来禁止原生事件
- 在html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1,mininmum-scale=1,maximum-scale=1,user-scalable=no" charset='UTF-8' />;
// 禁止移动端(IOS)双击页面变大
let touchTime = 0;
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.addEventListener(
'touchend',
function (event) {
//记录当前点击的时间与下一次时间的间隔
const nowTime = new Date();
if (nowTime.getTime() - touchTime <= 300) {
event.preventDefault();
}
touchTime = nowTime.getTime();
},
false
);
Comments NOTHING