WEB前端開發中，除了對PC端瀏覽器進行各瀏覽器兼容，移動端頁面中安卓端和IOS端的頁面兼容也是有很多問題是讓人費解和煩惱的，今天我來總結10個常見的兼容問題，供大家常考學習下。

1、IOS下input設置type=button屬性disabled設置true,會出現樣式文字和背景異常問題，使用opacity=1來解決

2、一些情況下對非可點擊元素如(label,span）監聽點擊事件，不會在IOS下觸發，css增加cursor:pointer就搞定了

3、1px邊框問題使用

xx:before{

content:‘‘;

position: absolute;

top: 0;

left: 0;

border: 1px solid #ccc;

width: 200%;

height: 200%;

box-sizing:border-box;

-webkit-box-sizing:border-box;

-webkit-transform: scale(0.5);

transform: scale(0.5);

-webkit-transform-origin: left top;

transform-origin: left top;

}

4、input為fixed定位在IOS下的bug問題，單擊焦點輸入，輸入跳轉到中間，可以使用內容滾動框也是fixed來設置

5、移動端字體小於12px使用四周邊框或者背景色塊，安卓文字偏上bug問題，可以使用整體放大1倍再縮放，而且字體不要是奇數

6、在移動端圖片上傳圖片 使用accept="image/*" multiple,兼容低端機的問題

7、在h5嵌入app中，IOS如果出現垂直滾動條時，手指開始滾動頁面後，滾動很快停止，就像邊剎車邊行駛一樣，有“滾動很吃力”的感覺self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;對webview設置了更低的“減速率”

8、click 300ms 延時響應 使用 Fastclick

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

9、input 有placeholder情況下不要設置行高，否則會偏上

10、移動端適配可以使用lib-flexible

移動端開發兼容問題