背景
解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决方式记录下来，下次遇到就直接拿过来用，也希望对他人有一些帮助。
兼容性问题及解决方式
1.object-fit在ie11和edge中不兼容，可以一些css hacks
使用background-size和background-position替换object-fit设置图片的样式
<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);
}
对于视频播放，object-fit:cover可以解决视频不会随着屏幕缩放的问题
<video class="video"></video>
.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 class="video"></video>
.video {
width: 100%;
height: auto;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: fill;
}
2.window.onload事件会在图片等资源加载完成后执行方法，但是它不会检测视频资源是否加载完成，可以使用如下代码检测视频是否加载完成
<video id="video"></video>
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) };
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。