移动端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;  

（编辑：河北网）

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