在我的瀏覽器中查找當前網頁的寬度

Question

有沒有一種方法可以找出當前網頁的寬度是多少？我正在嘗試使用CSS媒體查詢創建一個響應式網頁。
所以，當我調整頁面大小時，我能找出頁面的當前寬度是多少？

編輯：

所以一個方法來獲得寬度爲通過使用開發工具和，我發現有用的是

$（窗口）.WIDTH（）的第二種方法;

就我而言，我實際上是在尋找第一種方法。

Answer 1

無法獲取純HTML/CSS中瀏覽器視圖的寬度。但是，你可以在Javascript：

var viewportWidth = document.documentElement.clientWidth; 
var viewportHeight = document.documentElement.clientHeight; 

如果你只想寬度爲調試目的，你可以在開發者工具瀏覽器的大小。

例如，在Firefox中，可以打開開發者工具（按Ctrl + Shift + I），然後使用自適應查看面板（右側可用），請注意這個左上角的真正視截圖：

Answer 2

• 有專門設置/顯示爲實施自適應設計的目的，窗口大小無數的瀏覽器插件。 Chrome開發人員工具/ Firebug /類似工具將顯示元素的內容，填充，邊框和邊距的寬度。
• 您可以use JavaScript

Answer 3

您可以使用screen.width或screen.height來得到當前屏幕的寬度和高度。

如果您正在使用jQuery，你可以得到窗口的大小或使用jQuery方法的文檔：

$(window).height(); // returns height of browser viewport 
$(document).height(); // returns height of HTML document 
$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

Answer 4

我不知道你需要響應式設計當前的寬度。你想要做的就是告訴瀏覽器「你是否小於XXX px」，然後以這種方式顯示這部分。

在我看來，最簡單的方法是在身體上添加一個類。下面是使用enquire.js一個例子：

enquire.register("screen and (max-width:1100px)", { 
    match : function() {$('body').addClass('small-screen');},  
    unmatch : function() {$('body').removeClass('small-screen');} 
}); 

通過這種方式，你的頁面的主體將得到一個「小屏幕」類，如果寬度小於1100px。您可以輕鬆地使用這個類與CSS做出響應式設計：

.small-screen .menu { 
    display: none; 
} 

Answer 5

的Javascript

// set the initial width 
var viewportWidth = document.documentElement.clientWidth; 
var el = document.getElementById("width"); 
el.innerHTML = viewportWidth + "px"; 

// on resize 
window.addEventListener('resize', function(event){ 

    var viewportWidth = document.documentElement.clientWidth; 
    var el = document.getElementById("width"); 
    el.innerHTML = viewportWidth + "px"; 

}); 

HTML

<h1 id="width"></h1> 

JSFiddle Demo

Answer 6

Firefox現在有一個名爲Responsive Design View的很棒的工具。它位於工具菜單下>> Web Developer >>自適應設計視圖。它允許您重新調整視口的大小並在更改視圖時顯示尺寸。