项⽬中遇到的的兼容性问题及解决⽅法总结
1、华为、OPPO⼿机点击图⽚（需求是点击图⽚进⼊⽂章详情页）会先放⼤图⽚，关闭后才进⼊详情页。
解决办法：在标签⾥加上οnclick="return false"即可。
2、使⽤h5的video标签在移动端播放视频的时候，视频总是浮在最上层，优先级最⾼遮盖所有dom操作。
解决⽅法：
（1）根据需求采⽤绝对定位固定上下位置。
（2）操作dom的时候隐藏视频，操作结束显⽰视频，这样也不会影响视频的正常播放。
货号查询3、h5的video标签，如果不设置controls属性，那么在移动端视频⽆法加载。
解决⽅法：
（1）在页⾯上加⼀个按钮，点击按钮顺序调⽤⽅法.load()和.play()。注意：此⽅法需要在页⾯⼿动触发
调⽤，在vue⽣命周期⾥⾃动调⽤⽆效。
（2）给video标签加上设置controls属性值为真。
4、元素与元素之间尽量少使⽤margin，可以给元素设置padding-top来达到想要的元素间间隔距离效果。否则各个浏览器渲染出来差别太⼤。
5、写动画最好使⽤requestAnimationFrame，⽽不是setTimeout和setInterval。
原因：
嘉佑集①JavaScript是单线程的，所以定时器的实现是在当前任务队列完成后再执⾏定时器的回调的，如果当前队列任务执⾏时间⼤于定时器设置的延迟时间，那么定时器就不那么可靠了。
②使⽤setTimeout和setInterval，动画会出现抖动和卡顿现象。⼤多数电脑显⽰器的刷新频率是60Hz，即每秒60次，事件间隔为
16.7ms（1000/60），⽽由于setTimeout的设定的事件间隔不⼀定和屏幕刷新的时间相同。
setTimeout和setInterval缺点：
①⽆法⽆额定正确的时间间隔（浏览器、机器硬件的性能各不相同）。
②毫秒不精确。
文件删不掉③⽆法避免过度渲染（渲染频率太⾼、tab不可见等）
requestAnimationFrame实现原理：
①注册回调函数。
②浏览器更新时触发animate。
③animate会触发所有注册过的callback。
这⾥的⼯作机制可以理解为所有权的转移，把触发帧更新的时间所有权交给浏览器内核，与浏览器的更新保持同步。这样做既可以避免浏览器更新与动画帧更新的不同步，⼜可以给予浏览器⾜够⼤的优化空间。
requestAnimationFrame优点：
①采⽤系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不
会因为间隔时间太长，使⽤动画卡顿不流畅，让各种⽹页动画效果能够有⼀个统⼀的刷新机制，从⽽节省系统资源，提⾼系统性能，改善视觉效果。
②requestAnimationFrame会把每⼀帧中的所有DOM操作集中起来，在⼀次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
③在隐藏或不可见的元素中，requestAnimationFrame将不会进⾏重绘或回流，这当然就意味着更少的CPU、GPU和内存使⽤量
④requestAnimationFrame是由浏览器专门为动画提供的API，在运⾏时浏览器会⾃动优化⽅法的调⽤，并且如果页⾯不是激活状态下的话，动画会⾃动暂停，有效节省了CPU开销。
使⽤⽅法：
6、伪元素 :hover在iPhone上会失效
解决办法：
监听元素点击事件，添加class名。如下：
$('.do-item1-content1').on('touchstart', touchstart) $('.do-item1-content1').on('touchend', touchEnd) function touchstart(event) {
$(this).addClass('touchDiv')
}
function touchEnd(event) {
$(this).removeClass('touchDiv')
}
7、获取滚动条⾼度
浏览器获取滚动条⾼度的⽅法：
亲测：Chrome 和 Firefox只能通过document.documentElement.scrollTop获取，通过document.body.scrollTop获取的永远是0.封装：
function getScrollTop ( ) {
let scroll_top = 0;抖音发
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop
}else if (document.body) {
scroll_top = document.body.scrollTop
}
return scroll_top
高考霸气标语}
柿子不能和什么同吃8、获取某个div元素的⾼度
$('.className')[0].clentHeight
例如：
<div class="contact-content-right">
<p>11111</p>
<div>222222222</div>
</div>
height = $('.contact-content-right')[0].clientHeight
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论