简述
有天,辛苦做了个复杂操作功能的页面,上线后有用户反馈:很多功能使用不了。联系用户,发现用户使用笔记本电脑,没有禁用触控板,然后不小心碰到导致整个界面都放大,很多功能超出界面不见了。
在以前,如果要禁止移动端设备的触摸屏上,手指缩小放大的功能,都会想到使用viewport 来处理。如下:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
然而,目前的浏览器已经不再支持 viewport 禁止缩放的定义。现在使用这段代码,已经彻底无效,要想解决问题,得想新的方案。
剖析
放大页面的途径有:1、通过ctrl++;2、通过触控板/触摸屏双指手势操作。
-
其中【ctrl++】属于键盘行为,可以通过监听【onkeydown】进行拦截。
-
要禁止触控板的缩放行为,需要处理鼠标滚轮事件:wheel 。
实现
笔记本触摸板双指滑动,将响应该事件,如果对该事件阻止默认行为,就能解决缩放问题了。
document.addEventListener('wheel',function(event){ event.preventDefault()},{passive:false})
这样会导致滚动事件也被禁止。
解析event
我们可以在屏幕上建立一个2维坐标系,这样可以得到x、y两个坐标轴,其中x轴的正方向向左,y轴的正方向向下。
deltaX、delatY这两个字段,表示在x轴、y轴上移动的距离。
当我们通过 ctrl+滚轮对页面进行缩放时,经测试,页面放大:deltaY<0,页面缩小:delatY>0;
通过双指进行缩放时,通过观察event发现,等同于通 ctrl+滚轮 的行为。
结论
因此我们可以通过监听【wheel】事件,当ctrlKey字段为true,且deltaY 字段不等于0时,对事件的默认行为进行阻止。
document.addEventListener(
"wheel",
function (e) {
/* * 无论是ctrl+滚轮,还是在触控板或者触摸屏上双指缩放 都会有如下规律
* 1、ctrlKey = true
* 2、delteX = 0
* 3、delteY != 0
* */
if (e.ctrlKey && Math.abs(e.deltaY) !== 0) {
e.preventDefault();
}
},
{ passive: false }
);
副作用
这种方案导致 ctrl+滚轮 无法对页面进行缩放。