如何使用Javascript獲取'css-pixel'（媒體查詢）寬度？

Question

我意識到在獲得設備尺寸等方面之前已經提出了類似的問題，但是對於確切的方法似乎存在分歧。

假設我有媒體查詢（例如Twitter Bootstrap）

超小型設備手機（<768px）

小型設備平板電腦（≥768px）

中型設備台式機（≥992px）

大型設備台式機（≥1200px）

現在，我希望能夠使用Javascript基本上獲得相同的輸出。 換句話說，css媒體查詢像素數而不是實際的網點。 即我不需要得到確切的答案，但我想避免出一個因素或2或3，因為我得到'屏幕點'而不是css像素。

我更關心的是移動設備 - 尤其是Android - 而不是桌面設備。 screen.width對此可靠嗎？ 還是jQuery(document).width() ？

（這是針對一個研究項目，雖然我知道基本上不可能檢測平板電腦與手機，但我想了解人們使用的設備的大小。用戶體驗不會受到結果的影響。）

Answer 1

我最喜歡這樣做的方式如下（jQuery）：

var viewportWidth = $(window).width();
// Then  create if statements and execute code accordingly... 
if (viewportWidth <= 767) {
           // execute code
} else if (viewportWidth >= 768) {
           // execute this
}

您還可以在寬度之間執行視口代碼，例如：

if (viewportWidth >= 768 && viewportWidth <= 991) {
   //execute this
}

這將在視口介於768px和991px之間時執行代碼...

Answer 2

您可以使用這樣的Javascript獲取窗口寬度

var wid = window.innerWidth;

超小型設備手機（<768px）

if (wid < 767) {
   //execute this
}

小型設備平板電腦（≥768px）

if (wid >= 768 && wid <= 991) {
   //execute this
}

中型設備台式機（≥992px）

if (wid >= 992 && wid <= 1199) {
   //execute this
}

大型設備台式機（≥1200px）

if (wid >= 1200) {
   //execute this
}

Answer 3

這是我一直使用的腳本：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

然后，您可以將其調用為變量，並讀取其高度和寬度屬性：

var vp = viewport();
var vpWidth = vp.width;
var vpHeight = vp.height;