瀏覽器調整大小比較聲明

我的當前jQuery項目需要瀏覽器調整大小（寬度和高度）功能，某些支持的分辨率比較時髦。歡迎任何有關改進此比較聲明的建議。我試圖關閉任何洞，但我有一種感覺還剩下幾個。請注意我還在檢查'isIos'的變量。瀏覽器調整大小比較聲明

這裏的腳本：

function getBrowserWidth() { 
    $(window).load(function() { 
    if (window.innerWidth) { 
     return window.innerWidth; 
    } 
    else if (document.documentElement && document.documentElement.clientWidth != 0) { 
     return document.documentElement.clientWidth; 
    } 
    else if (document.body) { return document.body.clientWidth; } 
    return 0; 
    }); 
    $(window).resize(function() { 
    if (window.innerWidth) { 
     return window.innerWidth; 
    } 
    else if (document.documentElement && document.documentElement.clientWidth != 0) { 
     return document.documentElement.clientWidth; 
    } 
    else if (document.body) { return document.body.clientWidth; } 
    return 0; 
    }); 
} 

function getBrowserHeight() { 
    $(window).load(function() { 
    if (window.innerHeight) { 
     return window.innerHeight; 
    } 
    else if (document.documentElement && document.documentElement.clientHeight != 0) { 
     return document.documentElement.clientHeight; 
    } 
    else if (document.body) { return document.body.clientHeight; } 
    return 0; 
    }); 
    $(window).resize(function() { 
    if (window.innerHeight) { 
     return window.innerHeight; 
    } 
    else if (document.documentElement && document.documentElement.clientHeight != 0) { 
     return document.documentElement.clientHeight; 
    } 
    else if (document.body) { return document.body.clientHeight; } 
    return 0; 
    }); 
} 

var browserWidth = getBrowserWidth(), 
    browserHeight = getBrowserHeight(), 
    isIphone = navigator.userAgent.match(/iPhone/i) != null, 
    isIpod = navigator.userAgent.match(/iPod/i) != null, 
    isIpad = navigator.userAgent.match(/iPad/i) != null, 

    isIos = isIphone || isIpod || isIpad; 

if (browserWidth <= 1024 && isIos) { 

} else if (browserWidth > 800 && browserWidth <= 1024 && !isIos) { 

} else if (browserWidth <= 1024 && browserHeight <= 768 && !isIos) { 

} else if (browserWidth > 1024 && browserWidth <= 1280) { 

} else if (browserWidth > 1024 && browserWidth <= 1280 && browserHeight <= 720) { 

} else if (browserWidth > 1280 && browserWidth <= 1600) { 

} else if (browserWidth > 1280 && browserWidth <= 1600 && browserHeight > 768 && browserHeight <= 900) { 

} else if (browserWidth > 1920 && browserWidth <= 4000) { 

} else if (browserWidth > 1920 && browserWidth <= 4000 && browserHeight > 1080 && browserHeight <= 4000) { 

} else { 

}

來源

2012-03-30 Dylan

而是考慮使用媒體查詢。 – SLaks 2012-03-30 18:40:38

一遍又一遍調用$ .Window.width（）是不好的做法。將它存儲在一個變量中！ – epascarello 2012-03-30 18:42:42

完全同意！我會修改這個。 – Dylan 2012-03-30 18:44:35

，如果你真的想這樣做的方法，那麼我建議從最高到最低（排序switch語句）級聯比較。這樣，你不需要範圍：

var w = $.Window.width(); 

if(w>4000){ 
    //greater than 4000 
} else if(w>1920){ 
    //assumed less than 4000 greater than 1920 
} else if (w>1280){ 
    //assumed less than 1920 but greater than 1280 
} else if (w>1024){ 
    //assumed less than 1280 but greater than 1024 
} else if (w>800){ 
    //assumed less than 1024 but greater than 800 
} else { 
    //small sized 
}

來源

2012-03-30 18:48:45 Joseph

這比我的想法更優雅。如何使用這個例子來考慮窗口的高度？ – Dylan 2012-03-30 18:59:33

瀏覽器調整大小比較聲明

回答

相關問題