Print this page

A tool that lets you see your screen's dimensions

In web development and more specifically when we do responsive design, it is useful to know what the real screen size of a device is as it would appear for a css media query. For that reason we developed a simple tool that does exactly that. It will show you the screen width and height of the device you are accessing it from.

mobile screen width tool

Its main features are:

  • Simplicity: It only shows the useful information
  • It responds to changing screen orientation so you don't need to reload the page
  • It's css only so it provides the same results as a css media query would

But why do you need to use this tool? 

When a web designer creates a responsive website, it needs to be compatible with a wide range of mobile and portable devices that may have various effective screen widths (and no the resolution that the manufacturer provides isn't the effective screen width otherwise with a Full HD phone you would be presented with the desktop version of a website). So knowing the screen's size can speed up debugging immensely and help you not to break working screen sizes.

Please note that scrollbars, toolbars and other UI elements can also affect screen size. 

Where is it?

To use this tool, all you need to do is to follow this link

If you want to learn more about how we do responsive design please click here


Rate this item
(2 votes)

Social Share