您好,登錄后才能下訂單哦!
這篇文章主要介紹如何解決web開(kāi)發(fā)中瀏覽器兼容性問(wèn)題,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
兼容性問(wèn)題及解決方式
1.object-fit在ie11和edge中不兼容,可以一些css hacks
使用background-size和background-position替換object-fit設(shè)置圖片的樣式
<img class="loadingImage" src="url"/> .loadingImage { width: 100%; height: 100%; transition: all 1s ease; object-fit: cover; }
上述代碼中可以修改為如下:
<div class="loadingImage"></div> .loadingImage { width: 100%; height: 100%; background-size: cover; background-position: center; background-image: url(url); }
對(duì)于視頻播放,object-fit:cover可以解決視頻不會(huì)隨著屏幕縮放的問(wèn)題
<video class="video"></video> .video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover; }
可以使用如下css設(shè)置video標(biāo)簽,解決object-fit不兼容ie和edge的問(wèn)題
<video class="video"></video> .video { width: 100%; height: auto; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: fill; }
2.window.onload事件會(huì)在圖片等資源加載完成后執(zhí)行方法,但是它不會(huì)檢測(cè)視頻資源是否加載完成,可以使用如下代碼檢測(cè)視頻是否加載完成
<video id="video"></video> let video = document.getElementById('video') if (video.readyState === 4) { console.log('finish!') }
3.css的transition執(zhí)行完成后會(huì)觸發(fā)transitionend事件,但是存在兼容性,可以使用下面代碼解決瀏覽器間的兼容性
function checkTransitionEvent() { var el = document.createElement('div') var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } }
4.onwheel事件兼容性
support() { let support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel" "DOMMouseScroll"; return support },
5.wheel事件的wheelDelta和detail屬性在不同瀏覽器下值不同,可以使用如下代碼對(duì)其進(jìn)行normalize,參考https://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers
var wheelDistance = function(evt){ if (!evt) evt = event; var w=evt.wheelDelta, d=evt.detail; if (d){ if (w) return w/d/40*d>0?1:-1; // Opera else return -d/3; // Firefox; TODO: do not /3 for OS X } else return w/120; // IE/Safari/Chrome TODO: /3 for Chrome OS X }; var wheelDirection = function(evt){ if (!evt) evt = event; return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1; };
6.requestAnimationFrame兼容性
let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id) }; let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return setTimeout(callback, 1000 / 60) };
以上是“如何解決web開(kāi)發(fā)中瀏覽器兼容性問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。