Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display current screen size - Responsive Design tools

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?

like image 471
Jamie Hutber Avatar asked Dec 10 '12 00:12

Jamie Hutber


1 Answers

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

like image 66
Jamie Hutber Avatar answered Oct 23 '22 06:10

Jamie Hutber