移動(dòng)端 HTML5 audio autoplay 失效問(wèn)題由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻,會(huì)給用戶帶來(lái)一些困擾或者不必要的流量消耗,所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放,必須由用戶來(lái)觸發(fā)才可以播放。 解決方法: 先通過(guò)用戶 touchstart 觸碰,觸發(fā)播放并暫停(音頻開始加載,后面用 JS 再操作就沒(méi)問(wèn)題了)。 document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});Fixed錯(cuò)誤浮動(dòng)(固定)的元素,在瀏覽器窗口大小改變(輸入鍵盤彈出關(guān)閉),交互時(shí),定位屬性會(huì)變得異常。位置錯(cuò)位或者消失等等。 影響: 所有移動(dòng)瀏覽器。 解決方法: 1. 復(fù)雜交互頁(yè)面盡量避免fixed元素。 Video全屏Zindex失效zindex無(wú)效,視頻video始終在最上方。 影響: 很多國(guó)內(nèi)瀏覽器不兼容 解放方法: 設(shè)計(jì)時(shí)避免視頻元素與其他元素可能會(huì)出現(xiàn)的重疊問(wèn)題。 IOS里點(diǎn)擊select標(biāo)簽,瀏覽器會(huì)退出當(dāng)<select>里沒(méi)有<option>標(biāo)簽的時(shí)候,用戶點(diǎn)擊<select>,瀏覽器會(huì)強(qiáng)制退出。 影響:IOS系統(tǒng)的瀏覽器 解決方法: 在<select>里加入<option>元素,保證有元素存在。 js使用touchstart事件沒(méi)法調(diào)用手機(jī)鍵盤js使用touchstart事件,對(duì)表單使用focus( )方法,對(duì)表單獲得焦點(diǎn),沒(méi)辦法調(diào)用手機(jī)的鍵盤。 影響: Android系統(tǒng)的瀏覽器。 解決方法: 改用js的onclick事件 iOS Safari 委托事件綁定在
|
|
1
2
3
4
5 |
input,textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */} |
如果你不想用戶可以選中頁(yè)面中的內(nèi)容,那么你可以在css中禁掉。
.div { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all (移動(dòng)端不需要) */ -ms-user-select: none; /* IE 10+ */ }
|
|
來(lái)自: 昵稱10504424 > 《工作》