Finding current width of the web page in my browser

Question

Is there a way I can find out what the current width of the page is? I am trying to create a responsive web page using CSS media queries.
So when I resize the page, can I find out what the current width of the page is?

EDIT:

So one approach to get the width was by using the developer tools and the second approach that I found useful was

$(window).width();

In my case, I was actually looking for the first approach.

Solution 1

You can't get the width of the browser view in plain HTML/CSS. But, you can in Javascript:

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

If you just want the width for debugging purpose, you can find the browser size in Developers Tools.

For example, on Firefox, you can open Developers Tools (Ctrl+Shift+I) and then use the Adaptive View panel (available on the right), note the real viewport on the top left of this screenshot:

Solution 2

Firefox now has a great tool built in called Responsive Design View. It's under the Tools menu >> Web Developer >> Responsive Design View. It allows you to re-size the viewport and shows you the dimensions as you change it.

Solution 3

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