记录一下自己在做H5项目时遇到的与兼容有关的问题与解决方法

1.关于video标签兼容性的设置

为实现内嵌播放的需求：

iOS的safari浏览器，默认全屏，设置 webkit-playsinline="true" 以实现内嵌。（旧版iOS需此属性，新版可仅用 playsinline属性实现）

（腾讯系浏览器）qq浏览器，微信为X5内核，默认全屏，设置 x5-video-player-type="h5-page"以实现内嵌。

其他属性：disablePictureInPicture: 禁用画中画模式，即视频不会弹出一个小窗口播放； disableRemotePlayback: 可用于禁用视频的远程播放功能。

2.h5项目在ios上滚动卡顿

滚动区域没有正确处理：在iOS上，默认情况下滚动是由body处理的，如果页面的滚动区域过大或多个滚动区域交叠，可能会导致iOS在处理滚动时产生性能问题。

解决方法：通过正确使用 overflow和-webkit-overflow-scrolling: touch 让iOS原生支持滚动的区域，启用惯性滚动效果例如：

.scrollable {
    overflow-y: auto;/*必需*/
    -webkit-overflow-scrolling: touch; /* 启用惯性滚动 */
    /*缺少 overflow: auto 或 overflow: scroll 会导致 -webkit-overflow-scrolling: touch 无效*/
}