移动端H5页面开发坑点指南

问题2:禁用select默认箭头

::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰 
 
select::-ms-expand { display:none; } 

移动端HTML5 audio autoplay失效问题

由于自动播放网页中的音频或视频会给用户带来困扰或不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用JS的触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码:

document.addEventListener('touchstart', function () { 
    document.getElementsByTagName('audio')[0].play(); 
    document.getElementsByTagName('audio')[0].pause(); 
}); 

CSS动画页面闪白,动画卡顿,图片错乱的问题

1. 尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位
2. 开启硬件加速

-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 

浮动子元素撑开父元素盒子高度(BFC)

解决方法如下：

1. 父元素设置为 overflow: hidden;
2. 父元素设置为 display: inline-block;等

这里两种方法都是通过设置css属性将浮动元素的父元素变成BFC(块级格式化上下文)元素,使子元素高度可以撑开父元素;不过最好使用方法1,因为inline-block元素本身会自带一些宽高度撑开其本身

往返缓存问题

点击浏览器的回退有时候不会自动执行js,特别是在mobilesafari中;这与往返缓存(bfcache)有关系,解决方法:

window.onunload = function(){}; 

定位的坑

在IOS下fixed定位在软键盘顶起时会失效，所以我们在开发时统一使用absolute代替

audio元素和video元素在ios和andriod中播放问题

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> //音频,写法一 
<audio controls="controls"> //音频,写法二    
    <source src="music/bg.ogg" type="audio/ogg"></source> 
    <source src="music/bg.mp3" type="audio/mpeg"></source> //优先播放音乐bg.ogg,不支持在播放bg.mp3     
</audio> 

ios系统手机无法自动播放音频/视频

这个是苹果系统限制默认不允许自动播放音频/视频,需要点一下触发play()事件才能播放;那么我们可以在页面onload后触发播放事件:

document.getElementById('music').play(); 

到这里一般都可以播放音乐了,如果还不行很有可能是微信的限制

问题3:微信的限制

如果是微信的限制,这时需要调用微信接口,页面先引入:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 

然后JS写入微信事件:

document.addEventListener("WeixinJSBridgeReady", function() { 
    document.getElementById('music').play(); 
}, false); 

小结:

1. audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
2. audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

问题4:Safari浏览器自动播放

document.addEventListener('touchstart', function(){    
    audio.play(); 
}, false); 

ios系统不支持动画暂停样式(animation-play-state)

H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state是最简便的方式,然而ios不支持

目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值

ios防止长按页面元素被选中

解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口 
-webkit-user-select:none; //webkit浏览器   
-khtml-user-select:none; //早期浏览器  
-moz-user-select:none; //火狐  
-ms-user-select:none; //IE10  
user-select:none;  

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!