Question

HTML5，js检测微信和Safari浏览器，然后改变显示的元素？

比如我用的是video标签作为网站的背景，微信和苹果打开会黑屏，需要把背景视频改成背景图片。现在要判断是微信和Safari浏览器，然后video标签由显示状态<video></video>变为：<!-- <video></video>-->隐藏状态。背景图片元素由隐藏状态<!--<img />-->变为<img />显示状态，请问要如何写

Answer 1

思路 : 

video和img的样式都写好,然后先隐藏掉img的显示:  可以使用:display:none;

然后通过以下JS代码检测你需要的设备, 符合要求时候, 使用display:block展示图片,隐藏掉video

---

if (browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面

    var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象

    if (ua.match(/MicroMessenger/i) == "micromessenger") {

        //在微信中打开,

        img display:block;

        video  display:none

    }

    if (browser.versions.ios) {

        //是否在IOS浏览器打开

    }

} else {

    //否则就是PC浏览器打开

}

下面是检测方式 : 

var browser = {

  versions: function() {

      var u = navigator.userAgent,

          app = navigator.appVersion;

      return { //移动终端浏览器版本信息

          trident: u.indexOf('Trident') > -1, //IE内核

          presto: u.indexOf('Presto') > -1, //opera内核

          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

          mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器

          iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器

          iPad: u.indexOf('iPad') > -1, //是否iPad

          webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

      };

  }(),

  language: (navigator.browserLanguage || navigator.language).toLowerCase()

}

追问

可以了，太感谢了