一、兼容性问题
1.input输入框+position:absolute带来的问题
情况：在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常
展示：android存在问题 ios正常
原因：当子元素定位方式为absolute或者fixed，父容器没有position:relative，那么当前元素根据body定位。因android的虚拟键盘显示机制占用了一部分的屏幕，使得浏览器的屏幕资源高度缩小，定位发生改变，所以出现“被顶起”的情况。
解决：给被顶起的子元素添加父级元素设relative，并设置高度。
2.移动端click 300ms延迟
情况：会造成按钮点击延迟甚至是点击失效
展示：click事件在ios出现异常
原因：这是由于区分单击事件和双击屏幕缩放的历史原因造成的
解决：1.使用fastclick插件（不考虑）
2.使用touch系列事件：start->move->end->click
3.借助zepto的touch模块
3.IOS的非点击标签无法绑定click
情况：如题，比如label span
展示：无
原因：未知
解决：给该标签添加 cursor:pointer属性
4.三星手机遮罩下穿透问题
情况：遮罩层下的input、select、a等元素可以被点击和focus
展示：无
原因：未知
解决：将问题元素加入的disabled属性
5.fixed兼容性问题
情况：ios下fixed元素定位时容易出错，且软键盘弹出时，影响到fixed元素的定位
展示：Android下大部分正常
原因：未知
解决：使用iscroll插件
6.底部输入框被遮挡
情况：1.底部输入框软键盘会将底部输入框遮挡
2.页面自动上移，导致下方空白
3.IOS使用IScroll时，光标不会伴随输入框移动
4.软键盘弹出导致页面元素错位
展示：Android和ios
原因：当输入框位于半屏以下时
解决：1.尽量避免使用iscroll
2.ios使用 overflow:auto;
-webkit-overflow-scrolling:touch;/*当手指从触摸屏上移开，会保持一段时间的滚动*/
-webkit-overflow-scrolling:auto;/*当手指从触摸屏上移开，滚动会立即停止*/
3.最好在设计上规避，比如表单填写尽量分页，保证输入框在上半屏
4.使用js解决，代价太大，建议不用
var oHeight = $(document).height(); $(window).resize(function(){ if($(document).height() < oHeight){ $(".inputName").css("position","static"); }else{ $(".inputName").css("position","absolute"); } }); 7.数字键盘调起差异
情况：在使用input type=number时，ios不会出现九宫格
展示：ios展示101键盘
原因：未知
解决：<input type="number" pattern="[0-9]*" />
<input type="tel" />
8.android个别机型 Input 的placeholder会出现文本位置偏上的情况
情况：如题
展示：文本在input中不能垂直居中
原因：未知
解决：使用line-height:normal
9.safari手机版中回退有几率不会执行js
情况：如题
展示：不执行js代码
原因：和safari中的往返缓存(b-f cache)机制有关
解决：在页面中增加 window.οnunlοad=function(){}
10.ios6 中hover无效
情况：在ios 6中除了a标签之外的标签:hover无效
展示：如题
原因：未知
解决：只能使用 css class进行解决
11.zepto tap事件透传
情况：比如关闭遮罩，在关闭按钮绑定tap事件，关闭时会触发遮罩下元素的click事件
展示：无
原因：zepto的tap通过绑定在document上的touch事件委托来完成tap事件模拟,在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，但在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是还会触发click事件,而click事件有300ms延迟，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候，click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，也就出现了上面的点透现象。
解决：1.使用fastclick插件
2.使用touchend事件替代tap事件
3.延迟320ms执行
12.android个别机型body高度100%展示错误
情况：实际的高度比100%的高度小
展示：如题
原因：将系统自带的导航条一并算入高度重
解决：使用js重置高度：document.documentElement.style.height = window.innerHeight + 'px';
13.android部分低端机型中出现黄色框
情况：如题
展示：如题
原因：系统自带
解决：使用-webkit-tap-highlight-color: rgba(255,0,0,0);消除这一行为
14.android 4.0以下部分机型 active伪类不兼容
情况：android 4.0以下
展示：样式不统一
原因：系统自身原因
解决：为存在active的元素监听touch系列事件，且绑定空函数
15.上拉下滑滚动条卡顿
情况：Android ios都存在
展示：无
原因：未知
解决：body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;} 支持：Android3+和iOS5+ 实质就是保持一段时间的滚动
16.蒙版的兼容性
情况：低端android不支持mask蒙版
展示：无
原因：不支持-webkit-mask属性
解决：只能采用降级处理或js、添加html处理，通过判断style中是否存在WebkitMask进行判断，然后采取相应降级措施
17.圆角变方
情况：Android 个别2.x手机圆角失效
展示：时好时坏
原因：未知
解决：使用css解决：background-clip:padding-box;
border-box:裁剪背景到边框内
content-box:裁剪背景到内容内
padding-box:裁剪背景到内边距内
18.IOS input keyup、keydown、keypress响应较慢
情况：主要存在于IOS中
展示：在输入关键字查询中需要及时响应keyup事件做相应处理，ios中事件触发的并不及时
原因：未知
解决：使用html5的oninput事件代替onkeyup事件
主要情况在
二、怪异行为消除
1.键盘显示search按钮
<input type="search">
2.取出textarea默认样式
去除右下角样式：resize:none
去除框外上下空白：vertical-align: middle;
3.禁止 iOS 弹出操作窗口
-webkit-touch-callout:none
4.消除transition闪屏效果
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
5.iOS用中文输入法输入英文，字母之间出现六分之一空格
this.value = this.value.replace(/\u2006/g, '');
6.ios 及 android中audio控件无法自动播放
监听html touchstart事件，然后触发audio.play
7.android下取消语音输入按钮
input::-webkit-input-speech-button {display: none}
8.IOS取消英文首字母大写
<input autocapitalize="off" autocorrect="off" />
9.打电话和发短信
<a href="tel:1234-5678">致电:1234-5678</a>
<a href="sms:13245555555">短信: 13245555555</a>
10.去除表单等元素ios\android的系统默认样式
-webkit-appearance: none;
11.修改input placeholder的样式
input::-webkit-input-placeholder{color: #ccc;}
input:focus::-webkit-input-placeholder{color: #333;}
12.去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景
a,button,input{ -webkit-tap-highlight-color: rgba(255,0,0,0);}
13.避免android ios的字体不得小于12px
-webkit-text-size-adjust:none
但是会造成safari的字体缩放功能失效，所以建议
-webkit-text-size-adjust:100%
14.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
15.返回顶部卡顿 失灵
由于移动端scroll事件触发的时间不具有连贯性，且支持不好，且zepto没有animate，所以需要使用定时器运动修改scrollTop进行返回顶部
现成代码：
//返回顶部动画//goTop(500);//500ms内滚回顶部function goTop(times){ if(!!!times){ $(window).scrollTop(0); return; } var sh=$('body').scrollTop();//移动总距离 var inter=13.333;//ms,每次移动间隔时间 var forCount=Math.ceil(times/inter);//移动次数 var stepL=Math.ceil(sh/forCount);//移动步长 var timeId=null; function ani(){ !!timeId&&clearTimeout(timeId); timeId=null; //console.log($('body').scrollTop()); if($('body').scrollTop()<=0||forCount<=0){ //移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况 $('body').scrollTop(0); return; } forCount--; sh-=stepL; $('body').scrollTop(sh); timeId=setTimeout(function(){ani();},inter); } ani();} 16.取消部分Android机型自带的close按钮
#Search::-webkit-search-cancel-button{ display : none ; } 17.chrome Mobile fixed元素无法点击
场景：父子同时设置overflow:hidden 父元素设置position: fixed; 子元素设置position: absolute;且这些元素并未在页面顶部。
此时页面往下滚动， 则出现 子元素无法点击 的bug。
解决：去掉overflow：hidden
三、mate标签的使用
1.禁止个别Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
2.禁止 iOS 识别长串数字作为手机号
<meta content="telephone=no" name="format-detection" />
3.微信浏览器定宽640px
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
4.ios 7.0+ 当网站添加到主屏幕存在快速启动方式时隐藏地址栏
<meta name="apple-mobile-web-app-capable" content="yes" />
5.ios 快速启动时改变顶端状态条样式
<meta name="apple-mobile-web-app-status-bar-style" content="black|default|black-translucent" />
6.ios android添加主屏快捷方式后的标题
<meta name="apple-mobile-web-app-title" content="标题">
四、技巧类
1.IOS桌面图标的设置
< link rel = "apple-touch-icon" href = "touch-icon-iphone.png" />
< link rel = "apple-touch-icon" sizes = "76x76" href = "touch-icon-ipad.png" />
< link rel = "apple-touch-icon" sizes = "120x120" href = "touch-icon-iphone-retina.png" />
< link rel = "apple-touch-icon" sizes = "152x152" href = "touch-icon-ipad-retina.png" /> < link rel = "apple-touch-icon-precomposed" href = "touch-icon-iphone.png" /> <linkrel="apple-touch-startup-image"href="start.png"/>