那些移动端web踩过的坑2

时间 2019-11-08

标签那些移动 web 栏目无线繁體版

原文原文链接

原文连接：https://geniuspeng.github.io/2018/04/26/mobile-issues2/前端

坑是无穷无尽的，嗯…长江后坑推前坑~~
git

关于音频自动播放

H5的audio标签实现了浏览器端的音频播放可能性，虽然目前的手机浏览器也都支持这个标签和相关属性，但不一样的手机对其表现行为仍是五花八门，并且有的时候还和客户端那边的音频控制相关。此次遇到了一个问题是iOS中没法自动播放音频（autoplay无效，目测他们是考虑了流量问题吧），解决方法也还好，通常若是是微信里，可使用他们自带的一个事件来解决。不过须要先引入他们的js：
github

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()方法便可，
浏览器

let input = document.querySelector('input')
input.addEventListener('blur', function (e) {
    e.preventDefault();
    setTimeout(() => {
        $('.the-element')[0].scrollIntoView(); 
    }, 0)
})

关于scrollIntoView的用法:
微信

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资源大放送。