之前曾经想过要记录一下,后来觉得太负能就删了。毕竟既然端着这碗饭,用户群体不小的一个浏览器页面显示有问题,兼容嘛不做是不行的。

但是!!但是!!但是!!!
今天踩到的坑简直令人忍无可忍了!!
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);
        }
    }

控制台输出结果如下:

uc浏览器 支持html5 支持uc浏览器的大片_uc浏览器 支持html5

这一看之下了不得,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.不算是个坑但是很麻烦的一点。无法禁止缓存,而清除缓存需要打开控制面板再打开设置面板再点“更多”然后点击清除记录再确认清除内容,即使开发版也是如此。
然后每当你再次做出修改时就发现又缓存了。

//手动再见