JS 判断是否是手机端并跳转操作

墨蓝 2021-07-04 11:08 378阅读 0赞

JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息，在我的工作中遇到的不是十分频繁，被我的同事一问就给问住了，所以把之前找到的一些知识点整理出来，供大家参考，若哪里不对欢迎指出，我会及时的更改 (\#.\#)。

window.navigator

先从这个属性入手：`window.navigator` 返回一个`navigator`对象的引用，可以用它来查询一些关于运行当前脚本的应用程序的相关信息。

常用属性和方法：（想知道详细属性和方法的请点MDN）

`Navigator` 对象属性

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">appCodeName</td> 
   <td align="left">返回当前浏览器的内部“代码”名称,该名称可能是不"正确"的.</td> 
  </tr> 
  <tr> 
   <td align="left">appName</td> 
   <td align="left">返回当前浏览器的正式名称,该名称可能是不"正确"的.</td> 
  </tr> 
  <tr> 
   <td align="left">appVersion</td> 
   <td align="left">返回当前浏览器的版本号,该值可能是不"正确"的.</td> 
  </tr> 
  <tr> 
   <td align="left">cookieEnabled</td> 
   <td align="left">返回一个布尔值,表明当前浏览器是否启用了cookies.</td> 
  </tr> 
  <tr> 
   <td align="left">platform</td> 
   <td align="left">返回一个字符串,表明当前所使用的系统平台类型.</td> 
  </tr> 
  <tr> 
   <td align="left">userAgent</td> 
   <td align="left">返回当前浏览器的user agent字符串.</td> 
  </tr> 
 </tbody> 
</table>

`Navigator` 对象方法

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">javaEnabled()</td> 
   <td align="left">表明当前浏览器是否启用了对Java的支持.</td> 
  </tr> 
  <tr> 
   <td align="left">vibrate()</td> 
   <td align="left">如果设备支持震动(手机或其他),则触发设备震动.</td> 
  </tr> 
  <tr> 
   <td align="left">registerContentHandler</td> 
   <td align="left">允许网站将自己注册成为一个给定MIME类型的内容的处理程序.</td> 
  </tr> 
 </tbody> 
</table>

eg:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>	
    <div id="test"></div>
    <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; document.getElementById("test").innerHTML=txt; </script>
    </body>
    </html>

常用跳转代码

腾讯跳转

测试是什么终端

var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android：'+isAndroid);
    alert('是否是iOS：'+isiOS);

## JS判断手机打开`PC`网站的时候跳转到移动端网站 ##

如果是手机浏览器则跳转到手机端网站！如果是`PC`浏览器则停留！将下面代码添加到电脑端网站的首页`body`下面就好！

## JS判断手机自动跳转到手机网站 ##

为了让手机用户浏览网站的方便，我们做网站时，会做响应式自适应网站。可以自动判断用户浏览设备进行转换网站版面。如果用户使用手机浏览就跳转到手机网站。

除了自适应网站之外，我们还可在做网站时使用JS判断手机自动跳转到手机网站。方法也是比较简单。

![手机网站][20190908212704764.png]  
如果你有`PC`网站和手机网站二个版面，例如二者的域名分别是`www.xuewangzhan.net`和`wap.xuewangzhan.net`，那么你就可以在`PC`网站的头部文件里放以下的`JS`进行判断。

这段代码可以判断用户浏览设备类型，如果是手机访问就跳转到`wap.xuewangzhan.net`，如果是电脑浏览就不会跳转，仍然是`www.xuewangzhan.net`。

[20190908212704764.png]: /images/20210704/7df5c2e8ad62439d8633a0cea23a62be.png