移動 web 開發幾個明顯的兼容性問題

用 H5 作了個 IM 聊天應用，功能比較簡單，能夠發送文字圖片，以及播放原生客戶端發來的語音消息。

即時通信天然要用 websocket，接口也比較簡單，主要精力在於，理解並實現 先後端約定的相關消息協議，並無什麼難度。

前端開發，不可避免會遇到一些兼容性問題，分享幾個兼容方案。

鍵盤遮擋輸入框

H5 沒法控制原生輸入法，各類機型對虛擬鍵盤彈起行爲的處理機制不一，咱們的測試同窗很是貼心，與鍵盤有關的 bug 各類場景一個個算，一共有十來個，表象其實只有一個：鍵盤遮擋輸入框。

IM 輸入框一般都被設計爲吸附於底部，虛擬鍵盤彈起 輸入框要隨着上移，安卓還好，ios 對 fixed 的處理有點異常，這個問題網上已經有成功的解決方案了，設置一個定時器，不斷的去 scrollIntoView 就行了。

iphoneX 在虛擬鍵盤彈起的時候又有了另外的處理機制，只得針對具體機型，具體系統版本作兼容,無非多寫幾行if else。

這個 bug，在不影響正常使用的狀況下，盡力兼容就能夠了，我自認爲已經作到很好，心想絕逼能兼容 90%以上的場景，但並無令測試滿意，能夠多試試別人家的輸入框，大都有瑕疵，想作到完美，這真是個業界難題。

IOS 拍照，照片被旋轉

圖片預覽用到 FileReader 接口，上傳進度是 ajax 的onUploadProgress事件，都沒有問題。

這裏的兼容性主要在於 ios 拍照，照片會被旋轉。解決思路是根據旋轉角度，用 canvas 再給轉回來就能夠了，照片相關信息經過exif-js這個庫能夠輕鬆獲取。

語音消息播放

安卓和 ios 客戶端最先給的是spx音頻格式，spx 格式比較小，適合大量語音消息的傳輸，但 h5 audio標籤是沒法直接播放spx格式的，網上大部分都是在服務器端轉成 mp3 或者 wav，h5 直接加載轉碼後的格式播放。

我主要是苦於沒有找到瀏覽器端可解碼spx格式的 js 庫，通過溝通，咱們拋棄了spx，採用amr格式。

github 有現成可用的解碼庫對AMR 格式解碼，播放則使用強大的 AudioContext 接口，這個接口很是強大，值得好好看看，audio 標籤顯得確實有點太弱了。

這裏有個須要注意的問題：android 能夠正常播放 amr 文件，主要緣由是 amr 文件的採樣頻率是 8000 ，ios 支持到 20000 多，若是用超過 8000 的頻率播放，語音速度會很快，ios 的解決辦法是加頻率的同時加幀數。

固然，若是選擇直接播放 mp3 或者 wav，能夠自然避免不少問題。

詳細代碼，撩我。

總結

前端踩坑主要在兼容各類設備瀏覽器上，解決兼容性問題，其實對提高編碼能力並無多少實質性的幫助，但倒是前端開發不可避免的一部分。

詳細代碼，demo，有須要的能夠加我，一塊兒交流。