利用JS判断网页访问终端类型的实现方法

参考一：

//返回true表示为pc端打开，返回false表示为手机端打开
function check() { 
 var userAgentInfo=navigator.userAgent; 
 var Agents =new Array("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; 
 }

参考二：

简单的利用 JS 来判断页面是在手机端还是在 PC 端打开的方法（转）

判断终端类型的背景与需求

随着移动设备应用的普及，许多网站开始针对移动端展示界面。由于屏幕尺寸差异显著，PC端与移动端的展示内容往往不同。因此，如何判断页面是在移动端还是PC端打开成为一个常见问题。以公司官网为例，PC端和移动端的界面展示分别如下：

PC

手机

利用Navigator对象识别终端

Navigator对象

首先了解Navigator对象，它包含浏览器相关信息。其中userAgent属性是一个只读字符串，声明了浏览器用于HTTP请求的用户代理头值。我们可以通过判断navigator.userAgent中是否包含特定字符串来识别终端类型。例如，在Mac电脑上打印出的值为

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

具体含义此处不作解释，有兴趣的读者可自行查阅。从输出结果中可以看到包含Mac字样，其他终端类型的输出也类似。

那么，如何判断页面是在移动端还是PC端打开呢？

一行代码实现终端跳转

网上有很多方法，写法或难或简单，实际上只需一行代码即可解决。

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : http://news.baidu.com/;

上述代码利用了正则表达式和三目运算符。其含义是：如果是移动端打开，则跳转到https://www.baidu.com/；否则跳转到http://news.baidu.com/。如果对此写法感到困惑，可以参考下面更易理解的展开形式。

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  window.location.href = "https://www.baidu.com/";
} else {
  window.location.href = "http://news.baidu.com/";
}

如果仍不理解if语句中的判断逻辑，实际上就是利用正则表达式判断navigator.userAgent是否包含Android、webOS、iPhone等字符串。修饰符"i"表示不区分大小写，再通过正则的test方法判断是否匹配。如果这种方式难以理解，完全可以利用字符串的indexOf方法进行判断。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。