现在做前端网页不仅仅要兼容各大浏览器,也要适配不同的显示设备。在PHP或其它语言中有很多判断浏览设备的方法,今天我们就说一说利用JS来判断来访问的终端设备是手机还是PC,并做出相应的跳转。

js前端判断访问设备类型,js判断是否为移动端,js判断us,js获取浏览器userAgent

JS判断浏览器userAgent

User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。它是一个特殊字符串头,是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标 识,用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计;

利用navigator.userAgent.toLowerCase()获取浏览器userAgent并转为小写字母。

示例代码:

match() 方法可在字符串内检索指定的值,并返回结果数组,无值返回 null 

<script>
iswap();
function iswap() {
    var uA = navigator.userAgent.toLowerCase();
    var ipad = uA.match(/ipad/i) == "ipad";
    var iphone = uA.match(/iphone os/i) == "iphone os";
    var midp = uA.match(/midp/i) == "midp";
    var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var uc = uA.match(/ucweb/i) == "ucweb";
    var android = uA.match(/android/i) == "android";
    var windowsce = uA.match(/windows ce/i) == "windows ce";
    var windowsmd = uA.match(/windows mobile/i) == "windows mobile"; 
    if (!(ipad || iphone || midp || uc7 || uc || android || windowsce || windowsmd)) {
        // PC 端
    }else{
        // 移动端
    }
}
</script>

JS判断区分区分Android、iphone、ipad:

<script>
var ua = navigator.userAgent.toLowerCase();
if (/android|adr/gi.test(ua)) {
    // 安卓  
} else if (/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)) {
    //苹果  
} else if (/iPad/gi.test(ua)) {
    //ipad  
}
</script>

JS区分判断访客的浏览器

<script>
var ua = navigator.userAgent.toLowerCase();
if (/msie/i.test(ua) && !/opera/.test(ua)) {
    alert("IE");
    return;
} else if (/firefox/i.test(ua)) {
    alert("Firefox");
    return;
} else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
    alert("Chrome");
    return;
} else if (/opera/i.test(ua)) {
    alert("Opera");
    return;
} else if (/iPad/i) {
    alert("ipad");
    return;
}
if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {
    alert("Safari");
    return;
} else {
    alert("unKnow");
}   
</script>

js判断浏览器宽度区分设备

我们可以利用JS代码,来判断访问者设备屏幕的宽度的大小来确定访客的设备是否为移动设备。

window.screen.availWidth:用来获取浏览器屏幕的宽度。

window.screen.availHeight:用来获取浏览器屏幕的高度。

<script>
if(window.screen.availWidth<768){
    //移动端
}else{
    //PC端
}
</script>