现在主要负责移动端微信公众号的开发。在开发过程中遇到了许多兼容性问题。前端框架是vue全家桶。
问题1：
当点击输入框式会弹出系统键盘， 键盘会将整个窗口向上顶，导致整个窗口变短，从而引起样式，元素定位异常，非常不美观。在取消键盘后Android中会恢复窗口大小， ios不会“滚回来”。
Android和ios表现类似，但原理不同。Android 中键盘弹出直接改变了视窗大小，ios是将整个视窗往上顶滚动一定大小。
解决方法：（1） 由于ios中点击键盘完成按钮会触发输入框失去焦点事件， 那么统一封装input, textarea组件， 让其在失去焦点事件让浏览器重绘即可。具体可参考http://www.cocoachina.com/ios/20181225/25941.html
(2) Android中会恢复窗口大小，那么我们需要注意的就是键盘显示时的异常情况。一方面我们要尽量避免使用高度100%，尽可能给定元素固定高度，这样看起来就像是键盘将超出窗口部分正常遮盖，并无异常。特别需要注意的就是绝对定位，固定定位的元素。在一些特殊情况下可以特殊处理， 比如监测窗口高度，在高度变化时做某些特殊操作来提高用户体验。可以参考 https://www.cnblogs.com/daniao11417/p/9208713.html
问题2： 微信浏览器中滚动问题
在微信浏览器中， 使用原生滚动在移动端体验较差。 出现滚动条， 滚动不连贯， -webkit-overflow-scrolling:touch卡死， 不能下拉刷新。
解决： 使用transfrom：translate(x,y)来模拟滚动。better-scroll（https://www.npmjs.com/package/better-scroll） 解决了这个问题。在项目中将better-scroll二次封装使用。当然，better-scroll还有点小坑，踩踩更健康。
问题3：