Finding current width of the web page in my browser [closed]

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.

Answer 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:

Answer 2

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 3

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.

Answer 4

• There are numerous browser plugins devoted to setting/displaying the window size for the purposes of implementing responsive designs.
• Chrome Developer Tools / Firebug / similar tools will display the width of an element's content, padding, borders and margins.
• You can use JavaScript

Answer 5

You can use screen.width or screen.height to get the width and height of the current screen.

If you are using jQuery, you can get the size of the window or the document using jQuery methods:

$(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 6

I'm not sure you need the current width for responsive design. What you wanna do is to tell the browser 'if you're less than XXX px' then display this part that way.

In my opinion, the easiest way is to add a class on the body. Here's an example using enquire.js :

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

By this way, the body of your page will get a 'small-screen' class if the width is less than 1100px. You can easily use this class with CSS to make responsive design :

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