之前曾经想过要记录一下,后来觉得太负能就删了。毕竟既然端着这碗饭,用户群体不小的一个浏览器页面显示有问题,兼容嘛不做是不行的。
但是!!但是!!但是!!!
今天踩到的坑简直令人忍无可忍了!!
UC浏览器的touch事件真心是个坑,谁用谁知道!!容我先冷静一下。
事情是这样的。最近项目进度到了测试兼容性的阶段,测到UC浏览器的时候页面显示踩了很多坑先不说,一个滑动切换tab的效果在竖屏上测试正常,在横屏上切换为上下滑动,却怎么测也滑不动了。
果断使用真机远程调试大法,忍受着使用各种崩溃的UC浏览器开发版连接了UC的远程调试工具。
在相关代码上增加了控制台输出,UC浏览器崩溃了无数次之后迫不及待地打开了开发工具的控制台。
代码:
switch (e.type) {
case 'touchstart':
if (e.touches.length) {
var touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
console.log(startX + ', ' + startY);
}
break;
case 'touchend':
if (e.changedTouches.length) {
var touch = e.changedTouches[0];
endX = touch.clientX;
endY = touch.clientY;
console.log(endX + ', ' + endY);
}
}
控制台输出结果如下:
这一看之下了不得,touchend事件去哪了????
去哪了?????
看了看日期,我还是自己仔细测试了一下。
我告诉你它去哪了。中间各种测试过程就不提了直接上结论:
经过反复测试,在Android平台上的UC浏览器中touchend事件只在tap(即轻触后立即离开屏幕)时是每次都能触发,滑动后离开是否触发touchend事件要看手指滑动的方向。左右滑动可以出发touchend事件,上下滑动在没有滚动条的时候一定不触发,有滚动条的时候当放开手指时滚动条未达到顶端或底端时触发,当滚动条达到顶端或底端手指仍然没放开的情况下,放开手指后不触发touchend事件。
此时UC浏览器的版本是:UCBrowser_V10.8.5.689_android_pf145_(Build151116163108)
那么问题既然出现了,解决办法又是怎么样的呢?
很简单,在需要按顺序触发touchstart和touchend时,在touchstart或touchmove绑定的事件中加一行代码即可:
e.preventDefault();
看起来这似乎是Android 4.x中自带浏览器的遗留问题被UC继承了。
但是你以为事情这样就结束了吗?
然而这样做,你将面临一个新问题:那就是,你会发现在需要滚动的元素内部,触屏滚动变得不可用了!
原来touchstart和touchmove事件在移动端的默认行为就是页面的滚动。
坑爹呢这是!!
为了解决这个问题,我们必须在touchmove事件中对元素是否滚动做出判断。具体做法无非就是scrollHeight、scrollTop、以及父元素的offsetHeight(水平方向同理)啦。
下面是页面显示我踩到的主要几个坑:
1.无论meta是否规定scale,强制将页面宽度缩放为物理像素值。
2.不支持vw、vh等长度单位。
3.不支持flex布局。
4.不算是个坑但是很麻烦的一点。无法禁止缓存,而清除缓存需要打开控制面板再打开设置面板再点“更多”然后点击清除记录再确认清除内容,即使开发版也是如此。
然后每当你再次做出修改时就发现又缓存了。
//手动再见