移动端常见问题@小四
1.querySelectorAll和getELementsByTagName区别：
var lis = document.querySelectorAll('li')；
list.innerHTML +=list.innerHTML;(轮播图无缝滚动常见解决方案)；
如果是querySelectorAll()不会重新获取lis的length；整个DOM修改完后在用query获取就可 以了；或使用getELementsByTagName();
而getELementsByTagName()会重新获取lis.length；
2. 一像素问题
3. 点透
原因：点击弹出层touch事件首先被触发了，弹出层就被隐藏了。touchend后继续等待300ms发现没有其它行为，则继续执行click，由于弹出层已经消失了，所以当前click事件的target就落在了底层元素上，如果是input则会触发focus事件，如果是a链接则会进行页面跳转，或是select，radio，CheckBox都会被触发，看你起来就像点击的target“穿透”到底下去了，这就是点透的原理。
解决方案：
1，e.preventDefault()
oPop.addEventListener('touchend', function(e){
this.style.display='none';
e.preventDefault();
});
2，利用css3属性 pointer-events
取值auto｜none
当取值为auto 时，效果和没有定义 pointer-events 属性相同，鼠标不会穿透当前层。
当取值为none 时，元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
详细代码：
oPop.addEventListener('touchend', function(e){
this.style.display='none';
oUn.style.pointerEvents='none';
setTimeout(function(){
oUn.style.pointerEvents='auto';
}, 400);
});
3，遮挡
由于 click 事件的滞后性，在这段时间内原来点击的元素消失了，于是便“穿透”了。因此我们顺着这个思路就想到，可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。
同样的道理，不用延时动画，我们还可以在触摸位置放一个透明的元素，这样当上层元素消失而延迟的click来到时，它点击到的是那个透明的元素，也不会“穿透”到底下。在一定的timeout后再将生成的透明元素隐藏。
4、用fastclick，https://github.com/ftlabs/fastclick
5、实在不行就换成click事件。
4. rem算法
例如：
1，设计图是1080；
2，屏幕宽度/16；
计算步骤：
第一步： 1080/16 = 67.5，1rem = 67.5
第二步：比如logo图片宽度为240px，那么width应该写成3.5555556rem
5. 如果：
1，页面html标签换行；
2，html对应的标签设置display:inline-block;
结果就是：
显示在页面上会出现空隙
解决方案1：
页面html标签不要换行
解决方案2：
还行元素的父级添加font-size:0;
6. transtion闪烁 问题：
解决方案：
transtion3d(50px,0,0.1)；（Z轴一定要设置数值才能启用3d加速）
7. touches，targetTouches，changedTouches区别？
touches当前屏幕上手指列表；
targetTouches当前元素上的手指列表；
changedTouches触发当前事件的手指列表
8. 移动端点击300ms延迟
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不 是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
推荐两个js，一个是fastclick，一个是tap.js
9. IOS不兼容position:fixed属性
移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：
fiex.png
解决方案1：使用position：absolute模拟
<script type="text/javascript">
window.onscroll=function(){
$(".fixed").css("top",$(window).scrollTop());
$(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>
问题来了：滑动页面时头部底部div会有明显的抖动。
解决方案2：判断当前获得焦点元素是input则隐藏div改为position：absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(document.activeElement.tagName == 'INPUT'){
$(".fixed").css({'position': 'absolute','top':'0'});
} else {
$(".fixed").css('position', 'fixed');
}
}
</script>
问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力
解决方案3：插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery Mobile 没尝试，感觉会增负担。
解决方案3：重点来了，只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。
http://efe.baidu.com/blog/mobile-fixed-layout/
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了
