那些移动端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 |
document.addEventListener("WeixinJSBridgeReady", function () { |
如果是Safari这种,基本上就是通过交互来解决了,比如让用户第一次触摸的时候播放音乐
1 |
$(document).one('touchstart', function() { |
关于软键盘问题
H5页面中的输入框,输入框focus的时候就会弹出软键盘,失去焦点的时候键盘消失。其实正常来讲都还好,只是有的时候软键盘可能把输入框挡住,或者按钮挡住,这个倒不算什么大问题,这次令人头疼的是某些奇葩安卓机,如果使用了绝对定位或者fixed,软键盘弹出来的时候把页面往上推,推的下面出来一大块空白特别丑~这里的解决方法其实也很简单
1 |
$('body').height($('body')[0].clientHeight); |
还有一些更奇葩的安卓手机,软键盘出来的时候把页面顶上去,消失的时候把页面往下拉,又拉出一大片空白区域,需要手动上滑一下才正常。这里试了好多方法,最后找到了一个还算可以解决的,需要找到那个被拉下来的相关元素,然后执行scrollIntoView()方法即可,
1 |
let input = document.querySelector('input') |
关于scrollIntoView的用法:
1 |
element.scrollIntoView(); |
嗯,多学习吧~~长路漫漫!
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等10G资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号:
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集10G资源大放送。
最新文章
- 大端模式 VS 小端模式
- Nginx-Lua重定向系列
- VBS定时关闭的弹窗
- LCS(打印全路径) POJ 2264 Advanced Fruits
- a computer-centered view of information systems to a database-centered view
- Ajax动态滚动加载数据
- CentOS7 安装 scala 2.11.1
- Ehcache(2.9.x) - API Developer Guide, Searching a Cache
- cocos2d-x CCAction(转载)
- Events and Responder Chain
- jQuery插件,将内容插入到光标处
- HBuilder打包App方法
- Linux学习(三)putty,xshell使用以及密匙登陆
- 【Manacher算法】求最长回文串的优秀算法
- haproxy快速安装
- Python神坑:sum和numpy.sum
- lvs持久连接及防火墙标记实现多端口绑定服务
- 2. mysql 语句
- 【转】JQuery插件定义
- Grafana展示DNS解析延时
热门文章
- 前阿里云CTO章文嵩:怎样做开源才有意义?
- CSUOJ 1554 SG Value
- Struts2+Spring+Hibernate step by step 06 整合Hibernate
- 10款jQuery/CSS3动画应用 超有用
- poj 2480 Longge&;#39;s problem 积性函数性质+欧拉函数
- system.setting-全局变量数据监听
- thinkphp图片处理
- WdatePicker日期控件的使用
- WPF 入门《布局面板》
- Android通过startService播放背景音乐简单演示样例