移動端開發的相容問題(自我總結篇)

舞動乾坤發表於2017-11-28

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

2、一些情況下對非可點選元素如(label,span)監聽click事件,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問題,點選焦點input,input跳到中間位置,可以使用內容滾動框也是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 github.com/amfe/lib-f.…

之後有問題會陸續更新上去,大家有更多的相容問題或者以上有問題可以在評論中留言。


相關文章