js 区分浏览器来源是PC端还是移动端

Posted 2023-03-24

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

网上有很多方法，写的或难或简单，实际上一行代码就够了

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://new.baidu.com/"

参考技术A var browser =
versions: function()
var u = navigator.userAgent;
return
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
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
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
;
()

js判断是移动端还是pc端

运行页面的时候，执行到js会判断来自于移动端还是pc端，如果是移动端则跳转制定链接地址，这样在手机端会有额外的不必要浪费的加载时间

 

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应该程序，没有头部与底部 
};
}(),
 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.baidu.com"; 
}