移动端浏览器爬坑之旅
以前总觉得移动端页面也很容易写，最近才下笔，简直五步一坑，十步一雷。查阅了些资料，整理出了部分浏览器兼容性bug。
有问题就跟浏览器客服提出来，一般他们是会处理的。那么就以二师兄展开本次分享。
QQ浏览器X5内核问题汇总
https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/
微信浏览器
因为微信浏览器屏蔽了一部分链接图片，所以需要引导用户去打开新页面，可以用以下方式判断微信浏览器的ua
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
后端判断也很简单，比如php
function is_weixin(){
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
return true;
}
return false;
}
【UC浏览器】video标签脱离文档流
场景：标签的父元素(祖辈元素)设置transform样式后，标签会脱离文档流。
测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zj3xiyu
解决方案：不使用transform属性。translate用top、margin等属性替代。
【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象
场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。
在8.6的版本,这个情况直接出现。
在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。
测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
Demo：http://t.cn/zYLTSg6
【QQ手机浏览器】不支持HttpOnly
场景：带有HttpOnly属性的Cookie，在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。
测试环境：QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生浏览器】浏览器地址栏hash不改变
场景：location.hash 被赋值后，地址栏的地址不会改变。
但实际上 location.href 已经更新了，通过JavaScript可以顺利获取到更新后的地址。
虽然不影响正常访问，但用户无法将访问过程中改变hash后的地址存为书签。
测试环境：MIUI 4.0
【Chrome Mobile】fixed元素无法点击
场景：父元素设置position: fixed;
子元素设置position: absolute;
此时，如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
视觉(view)层并没有出现遮挡，只是无法触发绑定在该子元素上的事件。可理解为：「看到点不到」。
补充： 页面往下滚动，触发position: fixed;的特性时，才会出现这个bug，在最顶不会出现。
测试平台： 小米1S，Android4.0的Chrome18
demo： http://maplejan.sinaapp.com/demo/fixed_chromemobile.html
解决办法： 把父元素和子元素的overflow: hidden去掉。
使用zeptojs内嵌到android webview影响正常滚动时
https://github.com/madrobby/zepto/blob/master/src/touch.js 去掉61行,其实就是使用原生的滚动
iscroll4
iscroll4 的几个bug(来自 http://www.mansonchor.com/blog/blog_detail_64.html 内有详细讲解)
1.滚动容器点击input框、select等表单元素时没有响应】
onBeforeScrollStart: function (e) { e.preventDefault(); }
改为
onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }
2.往iscroll容器内添加内容时，容器闪动的bug
源代码的
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
改成
has3d = false
在配置iscroll时，useTransition设置成false
3.过长的滚动内容，导致卡顿和app直接闪退
- 不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
- 隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
- 不得已的情况下，去掉各种效果，momentum、useTransform、useTransition都设置为false
4.左右滚动时，不能正确响应正文上下拉动
iscroll的闪动问题也与渲染有关系，可以参考 运用webkit绘制渲染页面原理解决iscroll4闪动的问题 iscroll4升级到5要注意的问题
iscroll或者滚动类框架滚动时不点击的方法
可以使用以下的解决方案(利用data-setapi)
<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data-href="http://www.hao123.com/topic/pig">黄浦江死猪之谜</a>
也可以用这种方法
$(document).delegate('[data-target]', 'touchmove', function () {
$(this).attr('moving','moving');
})
$(document).delegate('[data-target]', 'touchend', function () {
if ($(this).attr('moving') !== 'moving') {
//做你想做的。。
$(this).attr('moving', 'notMoving');
} else {
$(this).attr('moving', 'notMoving');
}
})
以上来源于司徒正美的github
https://github.com/RubyLouvre/mobileHack
