JS判断客户端是手机还是PC

本文提供了两种用于判断用户设备类型的JavaScript函数。第一种函数通过检查用户代理字符串中是否存在特定关键字来判断是否为PC;第二种函数则更为详细地识别了多种移动设备,并据此进行页面重定向。

做项目遇到 需要在PC和手机上显示不同效果 需要判断设备   在网上找到相关代码  转载过来

第一种    实际使用的

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

第二种

function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        window.location.href=B页面;
    }
}
browserRedirect();

百度的判断

function uaredirect(f) {
 try {
  if (document.getElementById("bdmark") != null) {
   return
  }
  var b = false;
  if (arguments[1]) {
   var e = window.location.host;
   var a = window.location.href;
   if (isSubdomain(arguments[1], e) == 1) {
    f = f + "/#m/" + a;
    b = true
   } else {
    if (isSubdomain(arguments[1], e) == 2) {
     f = f + "/#m/" + a;
     b = true
    } else {
     f = a;
     b = false
    }
   }
  } else {
   b = true
  }
  if (b) {
   var c = window.location.hash;
   if (!c.match("fromapp")) {
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i))) {
     location.replace(f)
    }
   }
  }
 } catch(d) {}
}
function isSubdomain(c, d) {
 this.getdomain = function(f) {
  var e = f.indexOf("://");
  if (e > 0) {
   var h = f.substr(e + 3)
  } else {
   var h = f
  }
  var g = /^www\./;
  if (g.test(h)) {
   h = h.substr(4)
  }
  return h
 };
 if (c == d) {
  return 1
 } else {
  var c = this.getdomain(c);
  var b = this.getdomain(d);
  if (c == b) {
   return 1
  } else {
   c = c.replace(".", "\\.");
   var a = new RegExp("\\." + c + "$");
   if (b.match(a)) {
    return 2
   } else {
    return 0
   }
  }
 }
};




### Vue.js 中检测客户端设备类型 为了在 Vue.js 应用程序中区分移动设备和桌面设备,可以利用 JavaScript 的 `navigator.userAgent` 属性来解析用户代理字符串。这种方法能够帮助识别访问者使用的设备类型。 一种常见的方式是在创建 Vue 实例之前定义一个全局属性或方法用于判断当前环境: ```javascript // main.js 或入口文件 import Vue from 'vue'; import App from './App.vue'; Vue.prototype.$isMobile = function() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; // 检查常见的移动设备标记 if (/android/i.test(userAgent)) { return true; // Android 设备 } if (/iPhone|iPad|iPod/.test(userAgent)) { return true; // iOS 设备 } // 如果以上条件都不满足,则认为是非移动设备 return false; } new Vue({ render: h => h(App), }).$mount('#app'); ``` 这样,在任何组件内部都可以通过 `this.$isMobile()` 来调用这个函数[^1]。 另外,也可以考虑使用第三方库如 [mobile-detect](https://github.com/hgoebl/mobile-detect.js/) 提供更精确的检测功能。安装该库之后可以在项目里轻松实现跨平台兼容性的逻辑处理。 对于服务器端渲染的应用场景,考虑到首次请求时服务端也需要知道设备信息以便返回适当的内容给前端展示,因此可以在 Node.js 环境下提前获取这些信息并通过上下文传递给 Vue 组件实例化过程中的 props 参数[^2]。 如果希望集成更加自动化的工作流配置,比如自动重启开发服务器以应用更改,那么可以在项目的 package.json 文件内添加相应的 npm 脚本来简化操作流程[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值