网页中js如何判断设备类型是手机端还是pc端?
有时候会在项目中遇到设备类型判断的问题,这里和大家分享一个js判断设备类型的办法;
通过这个办法,不仅有效解决设备类型的判断问题,并且可直接根据设备类型不同而改变用户访问的网页链接。
说到设备类型的判断,这里不得不提一下HTML DOM userAgent属性。简单的来说,userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。
userAgent 属性的值
一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。详细内容请参考 [ W3C ] 中的定义,这里我们就不做深入研究了。另外,可以查看各种浏览器UserAgent一览表(桌面+移动)了解不同设备之间的区别。
代码块
下面是在工作中,经过不断学习和研究,本人总结出的最佳效果,基本可以满足项目的中等需求:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当前客户端是否为手机</title>
<script>
function isMobile(){
var ua = navigator.userAgent.toLowerCase();
var StringPhoneReg = "\\b(ip(hone|od)|android|opera m(ob|in)i"
+ "|windows (phone|ce)|blackberry"
+ "|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp"
+ "|laystation portable)|nokia|fennec|htc[-_]"
+ "|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";
var StringTableReg = "\\b(ipad|tablet|(Nexus 7)|up.browser"
+ "|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";
console.log(ua);
var isIphone = ua.match(StringPhoneReg),
isTable = ua.match(StringTableReg),
isMobile = isIphone || isTable;
if(isMobile) {
alert("yes");
window.location.href="http://www.baidu.com";
return true;
}else {
alert("no");
window.location.href="http://www.taobao.com";
return false;
}
}
</script>
</head>
<body onload="isMobile();">
<p> yes : 表示为移动端 </p>
<p> no : 表示为PC端 </p>
</body>
</html>
建议大家不只是在电脑段模拟手机效果。
以上就是“关于js判断设备类型”的全部内容,欢迎大家亲测验证,评论留言,我会在看到的第一时间及时回复。