移动端web前端的那些坑

1.移动端文件名不要用game等，以防被合作服务器劫持插入广告，从而影响项目运行

2.红米手机，ua返回iphone，需要结合platform判断，但是还不准确，导致需要ios和android区别对待的时候就坑了。

3.是fixed的问题。这个解决办法是尽量不要用，不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。

4.如果你想要使用css3的动画，那么一定要变着方式使用3d gpu加速的方式，不要试着left，height，width这样的元素进行变换了，

android4.4以下版本卡死你。

5.ios全线点击会有300毫秒延迟，使用fastclick解决。这个插件最良心了。

6.web app像素眼设计会纠结你1px边框问题

可以用1px尺寸的带背景色元素然后scaleX(0.5)或scaleY(0.5)实现0.5px效果。(更多解决办法：http://www.zhihu.com/question/

28870528；https://xinranliu.me/2015-05-09-1px-in-retina/)

比如要实现一个元素的下边框1px效果：demo：http://jsbin.com/tijiro/1/

	.item {
   	  position: relative;
	}
	.item:after {
  	  content: "";
   	  display: block;
   	  position: absolute;
    	  width: 100%;
    	  left: 0;
   	  bottom: 0;
    	  height: 1px;
   	  background-color: #c8c7cc;
   	  -webkit-transform: scaleY(0.5);
   	  transform: scaleY(0.5);
	}

7.qq浏览（X5），uc浏览以及ios的浏览器，滚动时不会触发scroll事件，但会触发touchmove。当停止滚动后会出发scroll。

8.meta功能要用好，禁止缩放，缩放比例，屏蔽电话号码等功能很实用。

9.如果想要像手机淘宝那样的各个平台看起来展示效果一致，那么就使用rem来做单位：但是要注意初始font-size的基准值调整，用f
ont-size：62.5%有时会出问题
<script type="text/javascript">
$(function() {
var jz_num;
offWidth = $(window).width();
jz_num = offWidth / 750;
$("html").css("font-size", jz_num * 20 + "px");
});
</script>


10.-webkit-tap-highlight-color可以取消点击高亮。

11.localStorage在浏览器开启无痕模式下ios会抛异常，导致js中断。

12.一些情况下对非可点击元素监听click事件，ios下不会触发，css增加cursor:pointer就搞定了。当然想要干脆静止点击就是not-allo
wed。

13.android4.4以下版本，设置圆角属性需要在直接元素上，向父元素设置圆角并且指定overflow:hidden是不会生效的。

14.微信浏览器中有的输入法的emoji输入后在输入框中显示为空

15.点击穿透 click

16.iOS（safari）有时候某个标签绑定点击事件无效，加了空的onclick=""就好了，如：<a onclick=""></a>

17.Android微信内置webview对meta viewport的支持有缺陷，当user-scalable=no时，设定width为固定数值（例如640）不会自动缩
放，需要用js做一些处理
（新版微信已经修正了这个问题）

18.Android调用重力传感器返回的数据和iOS和Windows Phone上的是相反的
19.iPhone5以上各种应用的webview（例如微信）在遇到有大量图片的页面时会出现图片乱套的情况，6和6plus更为严重，具体表
现为各种img和background-image互相错乱，困扰了我们好久，简直是大坑，目前研究出暂时的解决方法是动态给所有用到图片的
元素加上

-webkit-transform : translate3d(0,0,0)

进行强制重绘，测试结果对于绝大部分出现问题的机子有效，但仍然有小部分机器还是会出问题，另一种方法是进行懒加载，但是
这会降低开发效率，并且对使用background-image的元素比较难实现

20.safari（包括OS X、iOS和Windows版）对transform-origin的Z轴判定和其它所有浏览器都不同，设置transform-origin的Z轴会直
接产生translateZ的变换，十分不理解，暂无纯css解法

21.Android的各种浏览器都不支持同时播放多个音频，并且通过js连续播放几个音频的时候会出现一些问题

22.图片大小最好是标注的2倍，这样可以保证在各类机型上的清晰

23.小图片最好拼合起来做成雪碧图，然后可以在TinyPNG – Compress PNG images while preserving transparency网站上压缩后再
Base64嵌入html或css中。移动端要尽可能减少请求。不过太大的图片就不要base64了，性能会下降。一般以10k为界。

24.rem方案相当复杂，存在非常多的兼容问题，以至于阿里这边还专门有一个Flexible库来解决这一系列问题。但是兼容性问题解决
后开发会变得非常畅快。

25.border-radius不要随便乱用，在很多安卓机型上都会出现锯齿，非常丑

26.图片比较多的页面务必要做懒加载（也就是滚动到图片的时候才加载）

27.相对于底部绝对定位的按钮被键盘顶起来，用js定高

this.clientHeight = document.documentElement.clientHeight;
$("body").height(this.clientHeight);

28.做点击跳转，长按删除功能的时候坑比较多：
（1）组合使用touchstart,touchmove,touchend,click事件；
（2）部分机型按到文字会弹出选择，复制的选项，使用 onselectstart="return false;" 禁掉；
-- 之后才知道有很多移动端事件处理库可以用,如 Hammer.JS - Hammer.js


29.IOS下和安卓对json对象的遍历顺序相反，如

var obj = {x: 1,y: 2},
    str = "",
    temp = "",
    i = 0;
for(var item in obj){
    temp = i === 0 ? "" : "&";
    i++;
    str += temp + item + "=" + obj[item];
}
console.log(str);

安卓下输出

x=1&y=2

IOS下

y=2&x=1

30.微信 iOS 版 整页切换到 动态生成的表单，其提交按钮会自动点击，导致空白表单提交 —— 自己给 iOS WebKit 补上砍掉的 HT
ML 5 表单元素验证方法，提交前先验证 HTML 代码中的 required、pattern 属性，否则阻止提交事件

31.Android点击按钮什么的时候,总是出现一个焦点的光标在页面上,添加css后就解决了

body {
	-webkit-user-select: none;
}