国产视频app現在做前端網頁不僅僅要兼容各大瀏覽器,也要適配不同的顯示設備。在PHP或其它語言中有很多判斷瀏覽設備的方法,今天我們就說一說利用JS來判斷來訪問的終端設備是手機還是PC,并做出相應的跳轉。

js前端判斷訪問設備類型,js判斷是否為移動端,js判斷us,js獲取瀏覽器userAgent

JS判斷瀏覽器userAgent

User Agent中文名為用戶代理,是Http協議中的一部分,屬于頭域的組成部分,User Agent也簡稱UA。它是一個特殊字符串頭,是一種向訪問網站提供你所使用的瀏覽器類型及版本、操作系統及版本、瀏覽器內核、等信息的標識。通過這個標 識,用戶所訪問的網站可以顯示不同的排版從而為用戶提供更好的體驗或者進行信息統計;

国产视频app利用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>

国产视频appJS判斷區分區分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>