移动 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，有须要的能够加我，一块儿交流。