小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

移動(dòng)端兼容性處理1

 昵稱10504424 2015-09-14

移動(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元素。
2. 在input元素頁(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 委托事件綁定在document的事件失效

Safari瀏覽器下對(duì)document進(jìn)行委托事件的綁定,會(huì)失效。

影響:

Safari 對(duì)click事件定義只能冒泡到body下面的子節(jié)點(diǎn),所以委托在document上得click事件不會(huì)被觸發(fā)。

解決方法:

為body的子節(jié)點(diǎn)添加click事件可以解決。

Android中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框

點(diǎn)擊一個(gè)鏈接,會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩。

影響:

android手機(jī)

解決方法:

設(shè)置`-webkit-tap-highlight-color`的alpha值為0去除部分機(jī)器自帶的效果。

去除移動(dòng)端輸入框內(nèi)陰影

在iOS上,輸入框默認(rèn)有內(nèi)部陰影,但無(wú)法使用 box-shadow 來(lái)清除,如果不需要陰影,可以這樣關(guān)閉。

影響:

ios系統(tǒng)的手機(jī)

解決方法:

1
2
3
4
5
input,
textarea {
  border: 0; /* 方法1 */
  -webkit-appearance: none; /* 方法2 */
}

 

禁止選中內(nèi)容

如果你不想用戶可以選中頁(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+ */     
}

標(biāo)簽: web前端, 移動(dòng), 前端

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多