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

最新推荐文章于 2024-06-28 09:45:45 发布

.NET跨平台

最新推荐文章于 2024-06-28 09:45:45 发布

阅读量1.7k

点赞数

分类专栏： Html+Javascript

原文链接：https://blog.csdn.net/WuLex

版权

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

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

 window.navigator

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

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

Navigator 对象属性

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

Navigator 对象方法

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

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>

常用跳转代码

<script type="text/javascript"> 
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = 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) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = '跳转的移动端网址';
  }
 })();
 </script>
<script type="text/javascript"> 
<!-- 
  //平台、设备和操作系统 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad: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); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳转语句，如果是手机访问就自动跳转到wap.baidu.com页面 
  if (system.win || system.mac || system.xll||system.ipad) { 

     //  something.... 
  } else { 
   window.location.href = "PC端网址"; 
  } 
--> 
</script>

腾讯跳转

<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ 
  if(window.location.href.indexOf("?mobile")<0){
  try{
   if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
    window.location.href="手机端网址";
   }else if(/iPad/i.test(navigator.userAgent)){
    //window.location.href="pad网址"
   }else{
    window.location.href="PC端网址"
   }
  }catch(e){}
 }
 }
}
</script>
<script type="text/javascript"> 
<!-- 
  //平台、设备和操作系统 
  var system = { 
   win: false, 
   mac: false, 
   xll: false, 
   ipad: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); 
  system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; 
  //跳转语句，如果是手机访问就自动跳转到手机端网页
  if (system.win || system.mac || system.xll||system.ipad) { 
  } else { 
   window.location.href = "PC网页"; 
  } 
--> 
</script>
JS 判断浏览器客户端类型(ipad,iphone,android)  
<script type="text/javascript">  
 var bForcepc = fGetQuery("dv") == "pc"; 
 function fBrowserRedirect(){ 
  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){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = "手机网址"; 
   } 
  } 
  if(bIsIphoneOs || bIsAndroid){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = "手机网址"; 
   } 
  } 
  if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){ 
   var sUrl = location.href;  
   if(!bForcepc){ 
    window.location.href = ""; 
   } 
  } 
 } 
 function fGetQuery(name){//获取参数值 
  var sUrl = window.location.search.substr(1); 
  var r = sUrl.match(new RegExp("(^|&)" + name + "=([^&]*)(&|$)")); 
  return (r == null ? null : (r[2])); 
 } 
 function fShowVerBlock(){  
  if(bForcepc){ 
   document.getElementByIdx_x("dv_block").style.display = "block"; 
  } 
  else{ 
   document.getElementByIdx_x("ad_block").style.display = "block"; 
  } 
 } 
 fBrowserRedirect(); 
 </script>

测试是什么终端

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下面就好！

<script language="JavaScript">
function mobile_device_detect(url)
{
var thisOS=navigator.platform;
var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
for(var i=0;i<os.length;i++)
{
if(thisOS.match(os[i]))
{
window.location=url;
}
}
//因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
if(navigator.platform.indexOf('iPad') != -1)
{
window.location=url;
}
//做这一部分是因为Android手机的内核也是Linux
//但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手，即用navigator.appVersion信息做判断
var check = navigator.appVersion;
if( check.match(/linux/i) )
{
//X11是UC浏览器的平台 ，如果有其他特殊浏览器也可以附加上条件
if(check.match(/mobile/i) || check.match(/X11/i))
{
window.location=url;
}
}
//类in_array函数
Array.prototype.in_array = function(e)
{
for(i=0;i<this.length;i++)
{
if(this[i] == e)
return true;
}
return false;
}
}
mobile_device_detect(“http://m.baidu.com”);
</script>

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

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

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

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

<script type="text/javascript">
        var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate",
　　　　　　 "bada", "nokia", "lg", "ucweb", "skyfire");
        var browser = navigator.userAgent.toLowerCase();
        var isMobile = false;
        for (var i=0; i<mobileAgent.length; i++) {
            if (browser.indexOf(mobileAgent[i])!=-1) {
                isMobile = true;
                location.href = 'http://wap.xuewangzhan.net';
                break;
            }
        }
</script>

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

.NET跨平台

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JS 判断是否是手机端并跳转操作

JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息，在我的工作中遇到的不是十分频繁，被我的同事一问就给问住了，所以把之前找到的一些知识点整理出来，供大家参考，若哪里不对欢迎指出，我会及时的更改 (#.#)。 window.navigator先从这个属性入手：window.navigator 返回一个navigator对象的引用，可以用它来查询一些关于运行当前脚本的应用程序的相关信息...
复制链接

扫一扫