BOM學習實用路線（7）——BOM之navigator和screen

navigator 對象

---

- userAgent - appName - appVersion

navigator關於存儲設備信息及當前瀏覽器的一些東西。

console.log(navigator);

appVersion 獲取當前瀏覽器的版本號

language 當前使用的語言

onLine 是否有網

userAgent 用戶代理信息

切換手機模式，userAgent會發生變化

那麼navigator對象經常用在哪裏呢？我們可以藉助userAgent來判斷設備：

{
    // 判斷當前是否是PC
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
        var flag = true;
        
        for (let index = 0; index < Agents.length; index++) {
            if (userAgentInfo.indexOf(Agents[index]) > 0){
                flag = false;
                break;
            }
        }

        return flag;
    };

    console.log(IsPC());
}

我們可以輕鬆驗證此時的設備：

navigator對象除了可以判斷設備，還可以判斷什麼類型的設備，客戶端（及它的版本號）及瀏覽器的判別等等，這裏需要navigator.userAgent進行字符串解析（需要轉成小寫，方便我們判斷），這裏涉及了正則表達式，小編將在後續章節分享。

// 判斷當前是否是PC
function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}    

{
let ua = navigator.userAgent.toLowerCase();  // 轉成小寫，方便統一去判斷
if (/android|adr/gi.test(ua)) {
    // 安卓
    console.log("安卓");
    } else if(/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(ua)){
        //蘋果
        console.log("蘋果");
    }
}

screen 對象

---

width 、height

注意：它的兼容性不太好，width 、height用得多一些

console.log(screen);

具體使用我們再後續篇章再做闡述。

（後續待補充）