移動端開發的兼容問題

移動端開發的兼容問題

文章已同步個人github筆記 https://github.com/ymblog/blog，歡迎你們加star~~，加star後人生更加美好……

一、ios下input爲type=button屬性disabled設置true,會出現樣式文字和背景異常問題。

解決方案:使用opacity=1來解決

二、對非可點擊元素如(label,span)監聽click事件，部分ios版本下不會觸發。

解決方案:css增長cursor:pointer就搞定了

三、移動端1px邊框

解決方案：好比按鈕的box的class爲btn

.btn: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;
}

四、input爲fixed定位，在ios下input固定定位在頂部或者底部，在頁面滾動一些距離後，點擊input(彈出鍵盤)，input位置會出如今中間位置。

解決方案:內容列表框也是fixed定位,這樣不會出現fixed錯位的問題

五、移動端字體小於12px使用四周邊框或者背景色塊，部分安卓文字偏上bug問題。

解決方案:可使用總體放大屏幕的dpr倍(width、height、font-size等等)再使用transform縮放,使用canvas在移動端會模糊也須要這樣的解決方案

六、在移動端圖片上傳圖片兼容低端機的問題。

解決方案:input 加入屬性 accept="image/*" multiple

七、在h5嵌入app中，ios若是出現垂直滾動條時，手指滑動頁面滾動以後，滾動很快停下來，好像踩着剎車在開車，有「滾動很吃力」的感受。

解決方案:

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;對webview設置了更低的「減速率」

八、移動端click 300ms 延時響應

解決方案:使用 Fastclick

window.addEventListener( "load", function() {
  FastClick.attach( document.body );
}, false );

九、在安卓機上placeholder文字設置行高會偏上

解決方案:input有placeholder狀況下不要設置行高

十、overflow:scroll，或者auto在iOS上滑動卡頓的問題

解決方案:加入-webkit-overflow-scrolling:touch;

十一、移動端圖片壓縮預覽上傳的問題，能夠參考個人一篇文章https://segmentfault.com/a/11...

十二、移動端適配可使用lib-flexible https://github.com/amfe/lib-f...，使用rem來佈局移動端有一個問題就是px的小數點的問題，不一樣的手機對於小數點處理方式不同，有些是四捨五入，有些直接捨去掉，所以在自動生成雪碧圖時候圖標四周適當留2px的空間，防止圖標被裁剪掉

1三、iphonex的適配的解決方案

<meta name="viewport" content="...,viewport-fit=cover" />
body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

結束……撒花~~

文章已同步個人github筆記 https://github.com/ymblog/blog，歡迎你們加star~~，加star後人生更加美好……

以後有問題會陸續更新上去，你們有更多的兼容問題或者以上有問題能夠在評論中留言。