jiangwei小站
218 字
1 分钟
浏览器兼容性问题
2024-05-20

失效#

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
  );
}