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

发布网友

我来回答

共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()

}