移動端開發ios和安卓兼容問題
最近做移動端混合開的時候遇到一些安卓和iOS的兼容性問題，兼容想問題不僅在瀏覽器存在也在APP開發當中也會經常遇到這樣的情況。
最近看了一下內容很不錯的移動端開發相關的資料，自己總結出來了一些安卓和iOS兼容的知識點：
一、搜索確定問題
添加form元素，在提交的時候是input失去焦點
二、時間框選擇問題
添加form元素
三、多圖上傳問題
安卓上不能多圖上傳，無法解決
四、浮動問題
盡量用盒子模型布局
五、音頻自動播放問題，ios默認不自動播放
在document上添加點擊事件播放音頻
六、浮動高度撐開盒子
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
}
* html .clearfix{
height:1%;
}
.clearfix{
display:block;
}
.clear{
clear:both;
height:0;
font:0/0 Arial;
visibility:hidden;
}
七、 Css在ios中動畫閃屏問題
IOS下Safari渲染Transition時頁面閃動Bug
http://classjs.com/category/technology/css/
環境：IOS的Safari環境
問題：在做移動端左右滑動的時候，用到了CSS3的Transition屬性來進行動畫變換，結果每次渲染Transition屬性時，出現閃屏現象。
有一下兩種解決辦法，
方法一：
1-webkit-transform-style: preserve-3d;
2/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
方法二：
view source print?
1-webkit-backface-visibility: hidden;
2/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
八、單屏網頁滑動問題
添加
$( document ).on("touchmove",function(e){
e.stopPropagation();
return false;
})
九、鍵盤彈出問題
解決辦法：無，安卓鍵盤彈出整個頁面的window層的高度減小，ios無影響；
十：偽類active失效
要CSS偽類 :active 生效，只需要給 document 綁定 touchstart 或 touchend 事件
使用css3動畫用了transition或者animation后會有閃白的現象
-webkit-backface-visibility: hidden;
盡量寫成3d使頁面運行更流暢
-webkit-transform-style: preserve-3d;
ios橫屏時會重置字體大小
text-size-adjust：none
手機上最好是用tap事件 click事件會有300ms的延遲
禁止ios彈出各種操作窗口
-webkit-touch-callout:none
禁止用戶選中文字
-webkit-user-select:none
js動態生成的下拉菜單在安卓2.0中不起作用
解決方法：刪除了overflow-x:hidden;然后在js生成下拉菜單之后聚焦focus
消除 IE10 里面的那個叉號
input:-ms-clear{display:none;}
ios中文輸入法輸入英文時會有小空格 解決辦法 用正則this.value = this.value.replace(/\u2006/g, '');
三星I9100 （Android 4.0.4）不支持display:-webkit-flex這種寫法的彈性布局，
但支持display:-webkit-box這種寫法的布局,
相關的屬性也要相應修改，如-webkit-box-pack: center;
移動端采用彈性布局時，建議直接寫display:-webkit-box系列的布局
touchmove事件在Android部分機型(如LG Nexus 5 android4.4，小米2 android 4.1.1)上只會觸發一次
解決方案是在觸發函數里面加上e.preventDefault(); 記得將e也傳進去。
圖片圓角是顯示不正常 在圖片外面包裹 一個元素 然后給那個元素設置圓角 讓圖片變成這個元素的背景圖片
在android4.2背景會溢出，使用background-clip:padding-box;
ios不會彈出鍵盤 必須滿足下面幾點
① 文本框獲取焦點
② 手指觸屏（網頁區域，混合開發觸屏app頭不能讓webview彈出鍵盤）
③ 沒有延遲（不會ajax回調，不會延遲）