js判断客户端是移动端还是PC端

//判断客户端是移动端还是pc端
//userAgent用户代理
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var i = 0; i < Agents.length; i++) {
if (userAgentInfo.indexOf(Agents[i]) !=-1) {
flag = false;
break;
}
}
return flag;
}

//方法2,使用正则表达式

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  
    //alert(navigator.userAgent);    ipone移动端
    window.location.href ="iPhone.html";  
} else if (/(Android)/i.test(navigator.userAgent)) {  
    //alert(navigator.userAgent);   android移动端
    window.location.href ="Android.html";  
} else {  
//PC端
    window.location.href ="pc.html";  
};  

方法3

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应该程序,没有头部与底部  
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信   
                qq: u.match(/\sQQ/i) == " qq" //是否QQ  
            };  
         }(),  
         language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   

  if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||   
    browser.versions.iPhone || browser.versions.iPad){        
        window.location = "http://m.zhaizhainv.com";      
  }  

//方法4

var os = function() {  
     var ua = navigator.userAgent,  
     isWindowsPhone = /(?:Windows Phone)/.test(ua),  
     isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,   
     isAndroid = /(?:Android)/.test(ua),   
     isFireFox = /(?:Firefox)/.test(ua),   
     isChrome = /(?:Chrome|CriOS)/.test(ua),  
     isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),  
     isPhone = /(?:iPhone)/.test(ua) && !isTablet,  
     isPc = !isPhone && !isAndroid && !isSymbian;  
     return {  
          isTablet: isTablet,  
          isPhone: isPhone,  
          isAndroid : isAndroid,  
          isPc : isPc  
     };  

//方法5 检测平台

<script language="javascript">   
//平台、设备和操作系统    
var system ={    
win : false,    
mac : false,    
xll : false    
};    
//检测平台    
var p = navigator.platform;    
system.win = p.indexOf("Win") == 0;    
system.mac = p.indexOf("Mac") == 0;    
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);    
//跳转语句,如果是手机访问就自动跳转到caibaojian.com页面    
if(system.win||system.mac||system.xll){    
}else{    
window.location.href="http://caibaojian.com";    
}    
</script>  

//方法6

<script language="javascript">   
function is_mobile() {  
    var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;  
  var u = navigator.userAgent;  
  if (null == u) {  
   return true;  
  }  
  var result = regex_match.exec(u);  

  if (null == result) {  
   return false  
  } else {  
   return true  
  }  
 }  
 if (is_mobile()) {  
  document.location.href= 'http://caibaojian.com';  //修改http://caibaojian.com为你所需跳转目标页地址  
 }  
</script>  

//百度webapp版本

<!---识别手机或电脑的js开始--->  
<script language="javascript">   
(function(){  
    var res = GetRequest();  
    var par = res['index'];  
    if(par!='gfan'){  
        var ua=navigator.userAgent.toLowerCase();  
        var contains=function (a, b){  
            if(a.indexOf(b)!=-1){return true;}  
        };  
//将下面的http://caibaojian.com改成你的wap手机版页面地址 如我的 http://caibaojian.com  
        var toMobileVertion = function(){  
            window.location.href = 'http://caibaojian.com/'  
        }  

        if(contains(ua,"ipad")||(contains(ua,"rv:1.2.3.4"))||(contains(ua,"0.0.0.0"))||(contains(ua,"8.0.552.237"))){return false}  
        if((contains(ua,"android") && contains(ua,"mobile"))||(contains(ua,"android") && contains(ua,"mozilla")) ||(contains(ua,"android") && contains(ua,"opera"))  
    ||contains(ua,"ucweb7")||contains(ua,"iphone")){toMobileVertion();}  
    }  
})();  
function GetRequest() {  
   var url = location.search; //获取url中"?"符后的字串  
   var theRequest = new Object();  
   if (url.indexOf("?") != -1) {  
      var str = url.substr(1);  
      strs = str.split("&");  
      for(var i = 0; i < strs.length; i ++) {  
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
      }  
   }  
   return theRequest;  
}  
</script>  
<!---识别手机或电脑的js结束--->  

//方法7百度


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

以上内容参考:
kongjiea的博客
脚本之家

<think>我们被要求使用JavaScript来判断当前设备是移动端还是PC。根据提供的引用,我们可以总结出几种常见的方法: 1. **通过User Agent字符串检测**:这是最常用的方法,通过检查`navigator.userAgent`中是否包含移动设备的关键词(如'Mobile', 'iPhone', 'Android'等)来判断。 2. **结合屏幕宽度**:有些方法会同时检测屏幕宽度,因为移动设备通常屏幕较小(比如宽度小于等于768px)。 3. **使用`navigator.platform`**:检测平台字符串,但这种方法相对较少使用,因为User Agent更全面。 另外,引用中提到了一些注意事项: - User Agent可能被伪造(比如浏览器模拟PC模式)。 - 平板设备(如iPad)可能需要特别处理,因为它们可能被识别为PC(如果只检测User Agent而不检测平板关键词)。 - 建议结合CSS媒体查询进行响应式设计,而不是仅依赖JavaScript检测。 根据引用[^1][^2],我们可以编写一个函数,通过User Agent检测,并可以结合屏幕宽度来减少误判。 下面是一个综合的解决方案: ```javascript function isMobileDevice() { // 通过User Agent检测 const userAgent = navigator.userAgent || navigator.vendor || window.opera; const mobileKeywords = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/; // 如果匹配到移动设备关键词,则认为是移动端 if (mobileKeywords.test(userAgent)) { return true; } // 如果屏幕宽度小于等于768px,也认为是移动端(可选,根据需求) // 注意:这个条件可以单独使用,也可以作为补充,但要注意有些平板可能有较大的屏幕 if (window.innerWidth <= 768) { return true; } // 默认返回false,即PC return false; } ``` 然而,引用[^2]中提到双条件验证,我们可以调整一下,要求同时满足User Agent匹配屏幕宽度较小才认为是移动端?但通常的做法是:只要User Agent匹配就认为是移动端,而屏幕宽度条件可以作为备用,或者用于响应式设计。 但考虑到引用[^2]中提到的双条件验证是为了减少误判,我们可以这样设计:如果User Agent匹配移动设备,则返回true;否则,如果屏幕宽度很小(比如<=768px)且不是iPad等平板(或者也可以将平板视为移动端),则返回true。但这里要注意,iPad Pro的屏幕可能比较大,所以单纯用屏幕宽度可能不太准确。 实际上,更常见的做法是仅使用User Agent检测,因为屏幕宽度条件在桌面浏览器窗口缩小的时候也会触发,所以一般只将User Agent检测作为主要方法,屏幕宽度用于响应式布局(CSS媒体查询)而不是设备类型判断。 因此,我们通常这样写: ```javascript function isMobileDevice() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/.test(userAgent); } ``` 这个函数返回一个布尔值,true表示移动端,false表示PC。 另外,引用[^4]中使用了`navigator.platform`,但这种方法在现代浏览器中可能不够全面,所以我们不采用。 **注意事项**: - 如果用户使用平板设备,上面的正则表达式中的`iP(ad)`会匹配到iPad,所以也会被认为是移动端。如果你需要区分手机平板,可以进一步处理,但通常移动端包括手机平板。 - 这个函数在服务器渲染(SSR)时不能使用,因为`navigator`对象是浏览器环境才有的。 在Vue项目中,我们可以在`mounted`或`created`钩子中使用这个函数,或者将其作为Vue实例的一个方法,或者放在工具函数中。 例如,在Vue组件中: ```javascript export default { methods: { isMobile() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /Mobile|Android|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/.test(userAgent); } }, mounted() { if (this.isMobile()) { console.log('移动端'); // 执行移动端逻辑 } else { console.log('PC'); // 执行PC逻辑 } } } ``` 或者,你也可以使用一个全局方法,比如在Vue的原型上: ```javascript // main.js Vue.prototype.$isMobile = function() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /Mobile|Android|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/.test(userAgent); } ``` 然后在组件中通过`this.$isMobile()`调用。 **总结**:使用User Agent检测是最常用的方法,但要注意其局限性。在需要高准确性的场景,可以结合其他方法(如屏幕宽度)进行双重验证,但要注意桌面浏览器窗口缩小的情况。 §§相关问题§§ 1. 如何区分移动端中的手机平板设备? 2. 在响应式设计中,如何结合JavaScript检测CSS媒体查询? 3. User Agent字符串检测有哪些局限性?如何应对? 4. 在服务器(如Node.js)如何检测设备类型?</think>在JavaScript中判断设备类型(移动端PC)的核心方法是分析**用户代理字符串(User Agent)**,并结合屏幕尺寸进行辅助验证。以下是可靠实现方案: ### 解决方案代码 ```javascript function isMobileDevice() { // 核心:用户代理检测(覆盖主流移动设备) const ua = navigator.userAgent.toLowerCase(); const mobileKeywords = [ 'mobile', 'iphone', 'ipod', 'android', 'blackberry', 'windows phone', 'webos', 'opera mini', 'iemobile' ]; // 验证1:UA关键词匹配 const isUA = mobileKeywords.some(keyword => ua.includes(keyword)); // 验证2:屏幕尺寸辅助判断(可选但推荐) const isSmallScreen = window.innerWidth <= 768; // 常见移动端断点 // 双条件验证降低误判率(优先UA,屏幕尺寸作为补充) return isUA || (window.matchMedia("(pointer:coarse)").matches && isSmallScreen); } // 使用示例 if (isMobileDevice()) { console.log("移动端访问"); // 执行移动端逻辑(如路由跳转/UI调整) } else { console.log("PC访问"); // 执行PC逻辑 } ``` ### 关键实现原理 1. **用户代理(UA)检测**(核心方法)[^1][^2][^3] - 通过`navigator.userAgent`获取浏览器标识 - 检测关键词:`Mobile`、`iPhone`、`Android`等移动端特有标识 - 覆盖iOS/Android/Windows Phone等主流平台 2. **增强验证措施**(减少误判) - **屏幕宽度检测**:移动端通常 ≤768px(Bootstrap标准断点)[^2] - **交互精度检测**:`pointer:coarse`媒体查询识别触控设备 - **双条件逻辑**:避免浏览器模拟器伪装UA导致的错误 3. **特殊设备处理** ```javascript // 单独检测平板设备(如iPad) function isTablet() { return /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch)))/i .test(navigator.userAgent); } ``` ### 注意事项 1. **UA检测局限性** - 浏览器开发者工具可模拟UA(需结合屏幕尺寸验证)[^2] - 新型设备需更新关键词列表(如折叠屏设备) 2. **响应式设计推荐** ```css /* 优先使用CSS媒体查询实现布局适配 */ @media (max-width: 768px) { /* 移动端样式 */ } ``` JavaScript检测应仅用于**路由跳转**或**逻辑控制**场景[^2] 3. **服务检测方案** ```js // Node.js示例(使用express-device) app.get('/', (req, res) => { if(req.device.type === 'phone') { res.send('移动版页面'); } }) ``` ### 不同场景推荐方案 | 场景 | 推荐方案 | 优点 | |---------------------|-----------------------------|--------------------------| | 路由跳转 | UA检测 + 屏幕宽度验证 | 避免页面闪烁 | | 界面元素动态控制 | CSS媒体查询 + JS组件状态 | 响应窗口实时调整 | | 数据统计 | 服务UA解析 | 避免客户端篡改 | > 提示:对于Vue/React项目,建议在**路由守卫**或**根组件**中执行检测,动态加载对应设备版本的组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值