移动端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互相错乱，困扰了我们好久，简直是大坑，目前研究出暂时的解决方法是动态给所有用到图片的
元素加上
进行强制重绘，测试结果对于绝大部分出现问题的机子有效，但仍然有小部分机器还是会出问题，另一种方法是进行懒加载，但是
21.
Android的各种浏览器都不支持同时播放多个音频，并且通过js连续播放几个音频的时候会出现一些问题
（2）部分机型按到文字会弹出选择，复制的选项，使用 onselectstart="return false;" 禁掉；
-- 之后才知道有很多移动端事件处理库可以用,如 Hammer.JS - Hammer.js
29.
IOS下和安卓对json对象的遍历顺序相反，如
安卓下输出
IOS下
30. 微信 iOS 版 整页切换到 动态生成的表单，其提交按钮会自动点击，导致空白表单提交 —— 自己给 iOS WebKit 补上砍掉的 HT
-webkit-transform : translate3d(0,0,0)
这会降低开发效率，并且对使用background-image的元素比较难实现
20.
safari（包括OS X、iOS和Windows版）对transform-origin的Z轴判定和其它所有浏览器都不同，设置transform-origin的Z轴会直
接产生translateZ的变换，十分不理解，暂无纯css解法
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
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
y=2&x=130. 微信 iOS 版 整页切换到 动态生成的表单，其提交按钮会自动点击，导致空白表单提交 —— 自己给 iOS WebKit 补上砍掉的 HT
ML 5 表单元素验证方法，提交前先验证 HTML 代码中的 required、pattern 属性，否则阻止提交事件
31.
Android点击按钮什么的时候,总是出现一个焦点的光标在页面上,添加css后就解决了
body {
-webkit-user-select: none;
}