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.

Use the developer tools in your favourite browser. (Usually F12 to open) — George, Feb 12 '14 at 16:13
You mean programmatically? Or do you mean just by re-sizing your browser? — j08691, Feb 12 '14 at 16:13
@oGeez: So is developer tools same as what we see in inspect element? — kartik, Feb 12 '14 at 16:24

score 4 · Accepted Answer · answered Feb 12 '14 at 16:13

4

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:

Example Developer Tools

answered Feb 12 '14 at 16:13

Maxime Lorant

34,607
19
87
97

1

Make the screenshot again for SO-inception ;) – display-name-is-missing Feb 12 '14 at 16:16
1

@DanielLisik As you wish : http://i.imgur.com/QmGPWSW.png :D – Maxime Lorant Feb 12 '14 at 16:18
Needs more recursion. – apaul Feb 14 '14 at 13:59
By the way, it's possible (at least on Windows) to stretch the browser window across multiple monitors, to simulate a ridiculously wide screen. Not that it's necessary, just interesting, because the developer tools on browsers will reflect that. – Nagev Jul 06 '21 at 17:48

score 2 · Answer 2 · answered Feb 12 '14 at 16:28

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.

enter image description here

answered Feb 12 '14 at 16:28

j08691

204,283
31
260
272

Similar feature in Opera (Developer > Developer tools or CTRL+Shift+I), there's a button next to the *Elements* tab that looks like a phone over a tablet, called "Toggle device toolbar", which allows resizing and viewing the current size of the viewport. – Nagev Jul 06 '21 at 17:37

score 1 · Answer 3 · answered Feb 12 '14 at 16:24

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

score 0 · Answer 4 · edited May 23 '17 at 12:07

0

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

edited May 23 '17 at 12:07

Community

1
1

answered Feb 12 '14 at 16:13

Quentin

914,110
126
1,211
1,335

score 0 · Answer 5 · answered Feb 12 '14 at 16:16

0

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

answered Feb 12 '14 at 16:16

Ankur Aggarwal

2,993
5
30
56

Clean, but requires jQuery. – display-name-is-missing Feb 12 '14 at 16:16
1

-1 just for using jQuery just for *this*. Overkill. – Maxime Lorant Feb 12 '14 at 16:20
If I am already using jquery (I mean not specially included the library for this thing), shouldn't I go for these methods? – Ankur Aggarwal Feb 12 '14 at 17:28

score 0 · Answer 6 · answered Feb 12 '14 at 16:18

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;
}

Finding current width of the web page in my browser

6 Answers6