1696Days

1696 days since this post was last revised. Specific details are likely out of date.

I’m doing a lot of work with responsive web design at the moment and I wanted a quick and simple cross-browser way of showing what size the current viewport window (you know that bit that actually shows the webpage, sans the interface) was. There’s lots of cool extensions (Resize for Safari being a favourite) out there but none of them are cross browser. In the end I decided the easiest way was to create a simple HTML page that would show the sizes on the fly. That way, no matter what browser I used I could load the page in a different tab and hey presto. Click here to see a demo

In case anyone else finds it useful, here is the code. Just make a blank HTML page, copy this in and save.

Note (thanks to David Thatcher of http://www.hardweb.com.au/ for the heads up) you will need to delete the space before !DOCTYPE in the code below – for reasons known only to WordPress (the CMS I’m using), it adds a space in there where there isn’t one. Alternatively, just copy and paste the source from the demo link above.
Also thanks to Nikolaj who provided the amended JS so orientation resize isn’t necessary.
< !DOCTYPE html>


    
    Browser viewport size tester // benfrain.com
    


    
    

    

The benfrain.com super simple, what size is my viewport page?

Viewport Width:

Resize to find out!

Viewport Height:

Resize to find out!

Ben Frain Developer, Author: 'Enduring CSS', 'Responsive Web Design with HTML5 & CSS3'.