背景：目前大多数国内移动端浏览器都是使用 webkit 内核或基于 webkit 二次开发的内核（如 QQ 浏览器 x5 内核），因此，大多数渲染实现在各个浏览器中的表现都基本一致，而大多数移动端兼容性问题则是由浏览器本身的实现所带来的。
video 元素置顶
置顶意味着无法被其他元素覆盖，那实际会造成什么问题呢？
一、无法在视频画面里放置自定义播放控件、全屏按钮、视频标题等
二、遮挡其他元素（如弹出提示框等）
所幸大多主流浏览器只是默认将 video 元素置顶，我们可以通过给 video 设置 playsline 元素， 让其回归文档流，从而可以给其他元素覆盖：
<video
playsInline
webkit-playsinline // safrai 浏览器兼容
x5-playsinline // 微信、QQ 浏览器兼容
x5-video-player-type="h5-page" // 同微信、QQ
></video>
然而这只对大多数主流浏览器起作用；对于某些浏览器，为了在视频暂停期间显示广告内容，将 video 元素强制置于顶层。即使设置 playsInline 属性也没用。
那怎么解决呢？
很简单， 给钱～～～ 联系对应的浏览器厂商，让其将你的站点加入白名单即可。
这里大概总结了一下非强制和强制置顶的浏览器：
-
非强制置顶： chrome、 safari、 华为、小米和 QQ 等。
-
强制置顶：uc、百度、vivo 和 oppo 等。
全屏的兼容性问题
在对页面进行全屏操作，比如在全屏显示视频画面时，我们还想在视频画面上放放置视频标题等内容，此时就不能只是调用 video 元素的全屏方法，
而是使用 requestFullScreen () 方法，将整个容器元素进行全屏： 例 body.requestFullScreen()。
但在使用该方法时，需要注意： Safari on Ios 不支持该方法， 且在 ipad 中，需要添加 webkit 前缀， 这一点从 caniuse.com 上可以查到。
此时我们就需要在用户点击放大按钮的时候，回退到调用 video 元素的全屏方法来进行兼容性处理。
注意：无论是全屏 video 元素还是其他元素，都必须通过用户触发交互后才能进行调用，如点击、触摸等操作
固定定位兼容性问题
以下是 mdn 对固定定位的定义：
fixed 元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。
然而，在实际开发中却发现，在 Safari on Ios 中，固定定位的元素并没有被移除文档流，导致该元素被其他元素覆盖。
因此，最好将需要固定定位的元素挂载到 body 元素下。
软键盘兼容性问题
在输入框聚焦时，系统会自动拉起软键盘，而软键盘的拉起可能会造成浏览器视口的变化。 不同的系统对视口的影响是不一致的，但大致可以分为三类：
- 浏览器无变化、软键盘单独一层覆盖在浏览器上方
- 浏览器高度降低，降低的高度即为软键盘的高度，即他俩儿在同一层上
- 浏览器高度无变化，屏幕视口溢出，溢出的高度为软键盘的高度
总的来说，软键盘的影响千奇百怪，在软键盘拉起时尽量不要改动元素的位置，例如：输入框吸底等。
