144

我想寫一個JavaScript函數來獲取當前的瀏覽器寬度。如何使用JavaScript代碼獲取瀏覽器寬度？

我發現這一個：

javascript:alert(document.body.offsetWidth);

但它如果身上有寬度100％，它失敗的問題。

有沒有其他更好的功能或解決方法？

來源

2009-06-24 Amr Elgarhy

286

這是一個pain in the ass。我建議跳過廢話並使用jQuery，這可讓您只需執行$(window).width()。

來源

2009-06-24 14:32:58 chaos

如果我正確回想起來，jQuery已經將很多維度拉入核心。你還需要維度來做你的建議嗎？ – Nosredna 2009-06-24 14:41:51

原來你沒有。這真棒。編輯答案。感謝您的提醒。 – chaos 2009-06-24 14:43:55

jQuery中的$（window）.width（）支持自1.2版本開始，以防與任何人相關。 – chaos 2009-06-24 14:44:46

2017年

我原來的答案寫於2009年雖然它仍然有效，我想更新它的瀏覽器2017年仍然可以表現不同更新。我相信jQuery團隊在維護跨瀏覽器一致性方面做得非常出色。但是，沒有必要包括整個圖書館。在jQuery源代碼中，相關部分位於line 37 of dimensions.js。這被提取和修改，以獨立工作：

function getWidth() { 
 
    return Math.max(
 
    document.body.scrollWidth, 
 
    document.documentElement.scrollWidth, 
 
    document.body.offsetWidth, 
 
    document.documentElement.offsetWidth, 
 
    document.documentElement.clientWidth 
 
); 
 
} 
 

 
function getHeight() { 
 
    return Math.max(
 
    document.body.scrollHeight, 
 
    document.documentElement.scrollHeight, 
 
    document.body.offsetHeight, 
 
    document.documentElement.offsetHeight, 
 
    document.documentElement.clientHeight 
 
); 
 
} 
 

 
console.log('Width: ' + getWidth()); 
 
console.log('Height: ' + getHeight());

原來的答案

由於所有瀏覽器的行爲不同，你需要測試值，然後再使用正確的。下面是爲您完成此功能：

function getWidth() { 
    if (self.innerWidth) { 
    return self.innerWidth; 
    } 

    if (document.documentElement && document.documentElement.clientWidth) { 
    return document.documentElement.clientWidth; 
    } 

    if (document.body) { 
    return document.body.clientWidth; 
    } 
}

，同樣的高度：用getWidth()或getHeight()

function getHeight() { 
    if (self.innerHeight) { 
    return self.innerHeight; 
    } 

    if (document.documentElement && document.documentElement.clientHeight) { 
    return document.documentElement.clientHeight; 
    } 

    if (document.body) { 
    return document.body.clientHeight; 
    } 
}

調用這兩個在腳本中。如果沒有定義瀏覽器的本地屬性，它將返回undefined。

來源

2009-06-24 14:36:02 Travis

這裏是上面介紹的功能的一個較短的版本：

function getWidth() { 
    if (self.innerWidth) { 
     return self.innerWidth; 
    } 
    else if (document.documentElement && document.documentElement.clientHeight){ 
     return document.documentElement.clientWidth; 
    } 
    else if (document.body) { 
     return document.body.clientWidth; 
    } 
    return 0; 
}

來源

2012-06-06 16:26:59 ismael

var w = window.innerWidth; 
var h = window.innerHeight; 
var ow = window.outerWidth; //including toolbars and status bar etc. 
var oh = window.outerHeight;

都返回整數，不需要jQuery的。跨瀏覽器兼容。

我經常發現的jQuery的寬度（）和高度（）

來源

2014-02-13 00:52:33

從W3Schools的和跨瀏覽器返回無效值回IE的黑暗時代！

<!DOCTYPE html> 
<html> 
<body> 

<p id="demo"></p> 

<script> 
var w = window.innerWidth 
|| document.documentElement.clientWidth 
|| document.body.clientWidth; 

var h = window.innerHeight 
|| document.documentElement.clientHeight 
|| document.body.clientHeight; 

var x = document.getElementById("demo"); 
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + "."; 

alert("Browser inner window width: " + w + ", height: " + h + "."); 

</script> 

</body> 
</html>

來源

2015-01-14 07:34:34 user3651121

爲什麼沒有人提到matchMedia？

if (window.matchMedia("(min-width: 400px)").matches) { 
    /* the viewport is at least 400 pixels wide */ 
} else { 
    /* the viewport is less than 400 pixels wide */ 
}

沒有測試那麼多，但測試了android默認和android chrome瀏覽器，桌面chrome，到目前爲止它看起來好像運行良好。

當然，它不返回數值，但返回布爾值 - 如果匹配或不匹配，所以可能不完全符合問題，但這就是我們想要的，也許是問題的作者想要的。

來源

2015-05-27 06:47:21

如何使用JavaScript代碼獲取瀏覽器寬度？

回答

2017年

原來的答案

相關問題