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