移动端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系统手机无法自动播放音频/视频

（编辑：西安站长网）

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