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?

Jurisdiction

Screen size or browser size? – Libelant

browser size... for responsive designs and media queries – Jurisdiction

Displaying the browser's dimensions is a setting in Opera that has been around for years (almost positive it was in version 6). – Combined

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. – Jurisdiction

Answer 1

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.

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:

This will open the mobile dev tools which looks like this

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

Jurisdiction

Answer 2

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!

Hurst

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. – Jurisdiction

That's just a little CSS, you'll figure that part out easy, and style it however you like it? Something like this -> FIDDLE – Hurst

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. – Jurisdiction

Answer 3

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;
    };
})()​

Lovering