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
9、
XHTML中用 document.documentElement.clientHeight 代替
document.body.clientHeight
https://my.oschina.net/zhenguoguan/blog/138603
JS 获取屏幕、浏览器、页面的高度宽度
https://segmentfault.com/a/1190000010443608