Display current screen size - Responsive Design tools

Question

I'm doing a lot of responsive design development at the moment, as are all front-end devs.

One thing i would love to know is the exact current screen size.

Chrome has it: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

How can I display the current screen size with Firefox?

Displaying the browser's dimensions is a setting in Opera that has been around for years (almost positive it was in version 6). — cimmanon, Dec 10 '12 at 13:07
they are good kids :) Frustrating that firefox does not, moreover chrome also displays which media query is active in the dev toolbar when inspecting and viewing element styles. — Jamie Hutber, Dec 10 '12 at 13:42

Jamie Hutber · Accepted Answer · 2015-05-21T08:40:33.957

Its a very old question but worth mentioning.

Firefox now has "Responsive Design Mode" Which is the best to doing responsive testing that I've seen on any browser.

the shortcut is Cntrl+Shift+M and you're in a fantastic mobile view with complete control over the size of the screen whilst still being able to open the dev tools.

enter image description here

Update - Chrome Tools

Its been a while since this answer and since Firefox's mobile development tools haven't changed a whole deal, Google Chromes have changed a whole lot and are so fantastic it would seem silly not to share for those that haven't already used it.

Hit F12 then this will open, then hit the small mobile icon to bring up the mobile development tools:

How to Enable Mobile Dev Tools on Chrome

This will open the mobile dev tools which looks like this Such lovelyness it hurts

From here you can change all sorts of things, but easily between devices with the pre-defined devices and user-agents automatically set for you.

More over you can change things, like touch, geo-location etc

score 6 · Answer 2 · answered Dec 10 '12 at 00:38

6

Like this FIDDLE

$(window).on('resize', showSize);

showSize();

function showSize() {
    $('#size').html('HEIGHT : '+$(window).height()+'<br>WIDTH : '+$(window).width());
    $('#size2').html('HEIGHT : '+screen.height+'<br>WIDTH : '+screen.width);
}

EDIT: added screen size as well, use whatever you need!

answered Dec 10 '12 at 00:38

adeneo

312,895
29
395
388

Thanks, i thought about writting a plugin to do this exact thing only display it nicely and in the corner only when resizing.... Might be i have to do this... But really i'm after a nice non intrusive way of displaying it you see. – Jamie Hutber Dec 10 '12 at 00:43
That's just a little CSS, you'll figure that part out easy, and style it however you like it? Something like this -> [**FIDDLE**](http://jsfiddle.net/krWLA/4/) – adeneo Dec 10 '12 at 00:44
ye, i wrote one a few months back, but i couldn't be bothered to keep it, as it wasn't clean or nice. I was just hoping for a firefox plugin like as i said, chrome has one. Rather than me spending a day writing this thing. – Jamie Hutber Dec 10 '12 at 00:48

score 1 · Answer 3 · answered Dec 10 '12 at 01:23

You can put this as a bookmark. It should (hopefully) work cross-browser. Click on the display to get rid of it. http://jsfiddle.net/krWLA/8/

(function() {
    var v=window,d=document;
    v.onresize = function() {
        var w = v.innerWidth ? v.innerWidth :
                d.documentElement.clientWidth,
            h = v.innerHeight ? v.innerHeight : 
                d.documentElement.clientHeight,
            s = d.getElementById('WSzPlgIn'),
            ss;
        if (!s) {
            s = d.createElement('div');
            s.id = 'WSzPlgIn';
            d.body.appendChild(s);
            s.onclick = function() {
                s.parentNode.removeChild(s)
            };
            ss = s.style;
            ss.position = 'absolute';
            ss.bottom = 0;
            ss.right = 0;
            ss.backgroundColor = 'black';
            ss.opacity = '.5';
            ss.color = 'white';
            ss.fontFamily = 'monospace';
            ss.fontSize = '10pt';
            ss.padding = '5px';
            ss.textAlign = 'right';
        }
        s.innerHTML = 'w ' + w + '<br />h ' + h;
    };
})()

Display current screen size - Responsive Design tools

3 Answers3