Easily display the viewport size of your page (for responsive designs)
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.
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!
Hi Ben,
Thanks for the code for the Resize to display the viewport size of the page. It is a nice tool I will be testing future sites I build and of course my site too.
I also purchased your book to learn more and am just getting into Responsive Design, and will be updating my site to allow it to responsibly respond to its different viewers.
Best
Mike