移動開發兼容問題整理筆記

背景

過去一年多一直在作移動開發方向的項目，遇到了很多兼容性的坑，雖然最後爬出來了，可是爲了不同事再次掉坑，因而一邊開發，一邊也整理總結了一份移動端兼容性問題記錄筆記，記錄當時用的解決方案或解決問題時參考的權威文章，方便團隊知道如何解決相關兼容性問題及問題背後的一些原理，如今將這份筆記稍做整理記錄在這裏。

開始

1px邊框

通常是採用僞元素模擬的方式css

.scale{
  position: relative;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
複製代碼

其餘border-shadow，svg的方式也能夠，根據項目實際狀況選擇，若是項目移動端適配用的flexible.js作適配，那就很容易作到。html

具體幾種方法詳見：html5

關於移動端開發1px邊框的一些理解及解決辦法android

點透問題

也來講說touch事件與點擊穿透問題ios

通常懶人處理點透的方案都是引用fastclick，可是這個插件在某些場景下也有坑，通常要用它的話最好fork下源碼而後修改一下，開發中遇到了如下2個坑：git

1.安卓某些版本觸發兩次點擊問題github

Fastclick 致使click事件觸發兩次的問題web

2.光標移位問題（這個問題排查了了很久才找到是fastclick的問題）segmentfault

FastClick 填坑及源碼解析瀏覽器

鍵盤遮擋輸入框問題

這種輸入在頁面下方的佈局也很常見，通常評論，留言，聊天都會使用這種佈局，可是有時候彈起的鍵盤會蓋住輸入框，解決方案以下：

移動web頁面，input獲取焦點彈出系統虛擬鍵盤時，擋住input，求解決方案？

浮層上進行滑動，浮層下面的頁面也跟着滾動

web移動端浮層滾動阻止window窗體滾動JS/CSS處理

安卓border-radius:50%不圓

使用了rem作適配後使用具體值設定border-radius，不要用百分比，不然有些安卓機上50%是個橢圓形。

安卓元素沒法垂直居中問題

移動端android上line-height不居中的問題

這個我line-height居中，定位+transform，flex居中都試過，但都是偏上一些，不能垂直居中，最後仍是用的zoom解決。

安卓部分版本input裏的placeholder位置偏上

把input的line-height設爲normal

input{
    line-height:normal
};複製代碼

詳細原理看stackoverflow上的這個回答：

HTML5 placeholder css padding

ios的body設置overflow:hidden後仍然能夠滾動

通常在全部元素最外層再包一個大盒子.wrapper

.wrapper{
    position:relative;
    overflow:hidden;
}複製代碼

stackoverflow上有好幾種處理方法，能夠順便參考下：

Does overflow:hidden applied to <body> work on iPhone Safari?

ios fixed佈局問題

這種輸入框在固定在最上面佈局很常見，可是用ios下當鍵盤彈起時fixed會失效。解決辦法在下面文章裏：

Web移動端Fixed佈局的解決方案

一句話解釋就是把頁面滾動改成容器內滾動。

ios日期轉換NAN問題

JavaScript中的Date對象在Safari與IOS中的「大坑」

ios滾動卡頓

滾動的容器加上這個

-webkit-overflow-scrolling: touch;
複製代碼

ios滾動時動畫中止

移動端滾動懶人推薦使用better-scroll，很好的插件

ios滾動動畫中止的緣由及其餘解決辦法：CSS3 動畫在 iOS 上爲何會由於頁面滾動也中止？

長按閃退

element {
    -webkit-touch-callout:none;
}
複製代碼

禁止數字識別爲電話號碼

<meta name = "format-detection" content = "telephone=no">
複製代碼

取消點擊高亮

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);複製代碼

手機旋轉時禁止字體大小自動變化

-webkit-text-size-adjust:100%;
複製代碼

transition閃屏

.box { 
     -webkit-transform-style: preserve-3d; 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 
} 複製代碼

CSS3動畫卡頓

儘可能使用transform，避免使用height,width,margin,padding等。能夠開啓GPU硬件加速，但用硬件加速的時候也要注意，由於這個也有坑，不合理使用反而會讓應用愈來愈卡！

CSS3硬件加速也有坑！！！

微信，手Q，QQ瀏覽器內的坑

qq瀏覽器X5內核坑大全