原文链接：https://geniuspeng.github.io/2018/04/26/mobile-issues2/
坑是无穷无尽的，嗯…长江后坑推前坑~~
H5的audio标签实现了浏览器端的音频播放可能性，虽然目前的手机浏览器也都支持这个标签和相关属性，但不同的手机对其表现行为还是五花八门，而且有的时候还和客户端那边的音频控制相关。这次遇到了一个问题是iOS中无法自动播放音频（autoplay无效，目测他们是考虑了流量问题吧），解决方法也还好，一般如果是微信里，可以使用他们自带的一个事件来解决。不过需要先引入他们的js：
1 <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"/>然后在ready之后监听一个微信定义特殊的事件WeixinJSBridgeReady：
1 2 3 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('bgm').play(); }, false);如果是Safari这种，基本上就是通过交互来解决了，比如让用户第一次触摸的时候播放音乐
1 2 3 $(document).one('touchstart', function() { document.getElementById('bgm').play(); })H5页面中的输入框，输入框focus的时候就会弹出软键盘，失去焦点的时候键盘消失。其实正常来讲都还好，只是有的时候软键盘可能把输入框挡住，或者按钮挡住，这个倒不算什么大问题，这次令人头疼的是某些奇葩安卓机，如果使用了绝对定位或者fixed，软键盘弹出来的时候把页面往上推，推的下面出来一大块空白特别丑~这里的解决方法其实也很简单
1 $('body').height($('body')[0].clientHeight);还有一些更奇葩的安卓手机，软键盘出来的时候把页面顶上去，消失的时候把页面往下拉，又拉出一大片空白区域，需要手动上滑一下才正常。这里试了好多方法，最后找到了一个还算可以解决的,需要找到那个被拉下来的相关元素，然后执行scrollIntoView()方法即可，
1 2 3 4 5 6 7 let input = document.querySelector('input') input.addEventListener('blur', function (e) { e.preventDefault(); setTimeout(() => { $('.the-element')[0].scrollIntoView(); }, 0) })关于scrollIntoView的用法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 element.scrollIntoView(); //不显示声明任何参数，则相当于是element.scrollIntoView(true) element.scrollIntoView(alignToTop); //Boolean类型参数 //如果为 true，则元素的顶部将尽可能滚动到与父元素可见区域顶部对齐的位置，这是默认值。 //如果为 false，则元素的底部将尽可能滚动到与父元素可见区域底部对齐的位置 element.scrollIntoView(scrollIntoViewOptions); //Object类型参数 { behavior: 'auto' | 'instant' | 'smooth', block: 'start' | 'end' } //behavior：定义了元素滚动的行为，instant代表是立即滚动元素，smooth代表动画性的平滑滚动，但大部分浏览器并不支持smooth这个属性值，一般都是 instant。 //block：定义了元素滚动的方向，对应Boolean类型参数，如果设置了start值，则相当于是设置了element.scrollIntoView(true)，如果设置了end值，则相当于是设置了element.scrollIntoView(false)，嗯，多学习吧~~长路漫漫！
福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。
