javascript - Display current screen size - Responsive Design tools - Stack Overflow

admin管理员组

文章数量:1290821

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:

How can I display the current screen size with Firefox?

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?

• javascript
• css
• firefox
• responsive-design
• browser-plugin

Share Improve this question Follow edited Mar 24, 2016 at 11:57 Brad Adams 2,06944 gold badges2929 silver badges3838 bronze badges asked Dec 10, 2012 at 0:35 Jamie HutberJamie Hutber 28.1k5454 gold badges192192 silver badges311311 bronze badges 4

• Screen size or browser size? – bfavaretto Commented Dec 10, 2012 at 0:40
• browser size... for responsive designs and media queries – Jamie Hutber Commented Dec 10, 2012 at 0:42
• Displaying the browser's dimensions is a setting in Opera that has been around for years (almost positive it was in version 6). – cimmanon Commented Dec 10, 2012 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 Commented Dec 10, 2012 at 13:42

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 15

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

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!

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

本文标签： javascriptDisplay current screen sizeResponsive Design toolsStack Overflow