在網(wǎng)站開(kāi)發(fā)中，瀏覽器兼容性問(wèn)題是每個(gè)開(kāi)發(fā)人員所必須要面對(duì)的。由于我們使用的終端設(shè)備越來(lái)越多，各種瀏覽器的兼容性問(wèn)題顯得尤為重要。如果不兼容，就會(huì)影響到網(wǎng)站的瀏覽，所以我們要重視不同瀏覽器的兼容性問(wèn)題。這篇文章主要介紹如何解決網(wǎng)站開(kāi)發(fā)中瀏覽器兼容性問(wèn)題，感興趣的小伙伴們一定要看完！
網(wǎng)站瀏覽器兼容性問(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
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) };
以上就是網(wǎng)站開(kāi)發(fā)過(guò)程中，網(wǎng)站瀏覽器兼容性常碰到的一些問(wèn)題，我們?cè)诰W(wǎng)站開(kāi)發(fā)過(guò)程中要多總結(jié)，多嘗試，解決各種兼容性的問(wèn)題。
更多網(wǎng)站開(kāi)發(fā)、廣州網(wǎng)站開(kāi)發(fā)、網(wǎng)站開(kāi)發(fā)公司、企業(yè)網(wǎng)站開(kāi)發(fā)等相關(guān)需求，歡迎您咨詢(xún)派點(diǎn)互動(dòng)！
