如何解决web开发中浏览器兼容性问题
这篇文章主要介绍如何解决web开发中浏览器兼容性问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
目前成都创新互联公司已为近1000家的企业提供了网站建设、域名、雅安服务器托管、成都网站托管、企业网站设计、乐东黎族网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
兼容性问题及解决方式
1.object-fit在ie11和edge中不兼容，可以一些css hacks
使用background-size和background-position替换object-fit设置图片的样式
.loadingImage {
width: 100%;
height: 100%;
transition: all 1s ease;
object-fit: cover;
}
上述代码中可以修改为如下：
.loadingImage {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-image: url(url);
}
对于视频播放，object-fit:cover可以解决视频不会随着屏幕缩放的问题
.video {
width: 100%;
height: auto;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
可以使用如下css设置video标签，解决object-fit不兼容ie和edge的问题
.video {
width: 100%;
height: auto;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: fill;
}
2.window.onload事件会在图片等资源加载完成后执行方法，但是它不会检测视频资源是否加载完成，可以使用如下代码检测视频是否加载完成
let video = document.getElementById('video')
if (video.readyState === 4) {
console.log('finish!')
}
3.css的transition执行完成后会触发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属性在不同浏览器下值不同，可以使用如下代码对其进行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开发中浏览器兼容性问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
文章名称：如何解决web开发中浏览器兼容性问题
标题路径：
http://chengdu.cdxwcx.cn/article/pocpdh.html
