移動端開發ios和安卓兼容問題

移動端開發ios和安卓兼容問題

最近作移動端混合開的時候遇到一些安卓和iOS的兼容性問題，兼容想問題不只在瀏覽器存在也在APP開發當中也會常常遇到這樣的狀況。

最近看了一下內容很不錯的移動端開發相關的資料，本身總結出來了一些安卓和iOS兼容的知識點：

1、搜索肯定問題

添加form元素，在提交的時候是input失去焦點

2、時間框選擇問題

添加form元素

3、多圖上傳問題

安卓上不能多圖上傳，沒法解決

4、浮動問題

儘可能用盒子模型佈局

5、音頻自動播放問題，ios默認不自動播放

在document上添加點擊事件播放音頻

6、浮動高度撐開盒子

.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;

}

 

7、 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/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/

 

8、單屏網頁滑動問題

添加

$( document ).on("touchmove",function(e){

e.stopPropagation();

return false;

})

9、鍵盤彈出問題

解決辦法：無，安卓鍵盤彈出整個頁面的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回調，不會延遲）