那些移动端web踩过的坑2

原文链接：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资源合集大放送：jianshu.com/p/e8197d4d9

福利二：微信小程序入门与实战全套详细视频教程。


【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。



posted @ 2018-05-02 20:36  前端视听  阅读(115)  评论(0)  编辑  收藏  举报