218 字
1 分钟
浏览器兼容性问题
失效
event.prevent; //会导致 :active 失效
百度浏览器一滑动就返回
@touchmove="onTouchMove"
function onTouchMove(event: any) {
event.preventDefault();
}
浏览器禁止放大
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
但是 sefari 还是会放大,所以需要在 safari 下使用以下代码:
//禁止双指滑动放大
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
//禁止双击按钮放大
document.addEventListener('dblclick', function (event) {
event.preventDefault();
});
微信浏览器 安卓不自动播放
<video
id="video"
autoplay
muted
loop
playsinline
webkit-playsinline
x5-playsinline
x5-video-player-type="h5"
x5-video-orientation="landscape"
x-webkit-airplay="allow"
:poster=""
>
<source :src="" type="video/mp4" />
</video>
有些说需要因微信 jssdk,我本来就引了,所以不知道是否关键
普通浏览器 muted 静音就能自动播放
安卓微信我加了句代码就好了
document.getElementById("video").play();
还是不行的话,试试下面这个:
function doPlay() {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
var $video1 = $("#video1");
$video1[0].play();
});
}
if (window.WeixinJSBridge) {
doPlay();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
doPlay();
},
false
);
}