移动端和PC端判断浏览器环境

这段代码主要用于检测用户的浏览器类型和平台,特别是在移动设备上。它能识别IE内核、Opera内核、WebKit(苹果、谷歌)内核、火狐内核,并确定设备是否为移动设备、iOS、Android、iPhone、iPad或是Web应用。此外,还能根据UA字符串判断是否在微信、微博或QQ中打开。

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

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //在微信中打开
    }
    if (ua.match(/WeiBo/i) == "weibo") {
        //在新浪微博客户端打开
    }
    if (ua.match(/QQ/i) == "qq") {
        //在QQ空间打开
    }
    if (browser.versions.ios) {
        //是否在IOS浏览器打开
    }
    if(browser.versions.android){
        //是否在安卓浏览器打开
    }
} else {
    //否则就是PC浏览器打开
    if(browser.version.webKit||browser.version.trident||browser.version.presto||
browser.version.gecko) {
    return 'isBrowser'
    }
}

在Vue项目中,有多种方法可以判断当前运行环境移动端PC还是移动浏览器,以下是几种常见的实现方式: ### 利用`navigator.userAgent`进行判断 `navigator.userAgent` 是一个包含了有关浏览器的信息的字符串,可以通过正则表达式来匹配其中的关键字,以判断设备类型。 #### 方法一:在`App.vue`中进行判断并跳转路由 ```vue <template> <!-- 组件模板 --> </template> <script> export default { mounted() { if (this._isMobile()) { console.log('手机'); this.$router.replace('/mb_index'); } else { console.log('pc'); this.$router.replace('/pc_index'); } }, methods: { _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); return flag; } } } </script> ``` 这种方法在组件挂载时进行判断,并根据判断结果跳转到不同的路由页面 [^2]。 #### 方法二:在`computed`属性中判断 ```vue <template> <div> <p v-if="isMobile">当前为移动端</p> <p v-else>当前为PC</p> </div> </template> <script> export default { computed: { isMobile() { const userAgent = navigator.userAgent.toLowerCase(); return /mobile|android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent); } } } </script> ``` 此方法通过计算属性 `isMobile` 来判断是否为移动端,并在模板中根据判断结果显示不同的内容 [^5]。 #### 方法三:在`index.html`中进行判断并跳转 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> <script> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, presto: u.indexOf('Presto') > -1, 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/), android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iPhone') > -1, iPad: u.indexOf('iPad') > -1, webApp: u.indexOf('Safari') == -1 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }; if (!browser.versions.mobile) { window.location.href = "pc域名"; } </script> <script src="app.js"></script> </body> </html> ``` 这种方法在 `index.html` 文件中进行判断,如果不是移动端则跳转到PC的域名 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易66丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值