你的位置:首页 > Java教程

[Java教程]UC浏览器的那些坑


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

但是!!但是!!但是!!!
今天踩到的坑简直令人忍无可忍了!!
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事件去哪了????

去哪了?????

于是我就机智地bing了一下,找到如下链接:
http://bbs.uc.cn/thread-4947182-1-1.html
http://www.cnblogs.com/canrz/p/4917965.html

看了看日期,我还是自己仔细测试了一下。
我告诉你它去哪了。中间各种测试过程就不提了直接上结论:

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

//手动再见