Window Size bookmarklet to test/debug CSS3 Media Queries

Update: the Window Size bookmarklet no longer relies on jQuery! It’s also fixed in Firefox (v0.2.2)

While casually debugging some CSS3 media queries earlier, it struck me how useful it would be to have a simple bookmarklet, which you could click to display the viewport (window) size of any page you’re on and would update the X/Y size when you shrink/expand the browser. So I wrote one.

Window Size Bookmarklet

Drag this bookmarklet to your bookmarks bar (or whatever you call it) and click it, then play around with shrinking my site to see what happens at which screen sizes:

Window Size « all the code is in here! (click and drag it to your bookmarks)

~~It weighs in at just under 0.6kb, though it loads jQuery (if not already loaded), which I suppose is a cop-out, but heck, it took 15 minutes, and I spent 5 of that JSHinting it and writing this.~~

Version 0.2 weighs in at just over 0.4kb and no longer relies on jQuery. It was actually a lot easier to write in plain Javascript (lesson learnt there for sure) – though to be fair it may no longer work in certain browsers (not tested yet.)

Use it on any site you’re working on to see the viewport size in the top left. It’s great for checking out your (or some other developer’s) media-query skillz, as you can easily see what happens at any specific viewport width. If it’s not immediately obvious why this would be useful, comment up below and I’ll post some relevant material or clarifications…

It should work on just about any website, though I’ve only tested it in Chrome, Safari and Firefox. Please test it loads, hack it, improve it and send it back for version 0.3!

PS. the code is on Github. Have a nice day!

PPS. Forgot to mention, one limitation is that if you zoom in/out in the browser, it messes with the window’s height and width, so it’s best to run this bookmarklet at default zoom level.

Joss

15 thoughts on “Window Size Bookmarklet: see the size of any page to debug CSS3 media queries and adaptive layouts”

Pingback: Window Size Bookmarklet: see the size of any page to debug CSS3 media queries and adaptive layouts | reADactor

John Sousa Mar 3rd, 2011 at 1:36 am

This is great. It’s something that I didn’t realize I always wanted. Good stuff.

Reply ↓

Joss Post authorMar 3rd, 2011 at 1:44 am

Thanks – hope it comes in handy.. Cross ref with specs for iPad and iPhone screen size etc when working with it.

Reply ↓

Gaurav Mishra Apr 6th, 2011 at 1:51 pm

Nice [funny tagline] in screenshot :D
This very handy! Thanks :B

Reply ↓

Joss Post authorApr 15th, 2011 at 7:08 am

Thanx dude!

Reply ↓

Pingback: Veckans länktips – 2011-04-10 | lillbra.se

Jitendra Vyas Sep 29th, 2011 at 12:54 pm

Does it include the width of Scroll bar

Reply ↓

Pingback: Responsive Design bookmarklets « Ramblebramble's Weblog

teo Jan 29th, 2012 at 3:41 pm

thx Joss, that’s what I need!

just to learn and better understand…
I’ve tryed to do something similar by myself but I have some issue I cannot understand.

I’m using JQuery to print html, body, window and document width.
They return differents values and no one correspond to the real media query value
Es, media query at max-width: 320px and the width values printed by the js is
html: 305, body: 295, document: 310, window: 305

Magically, your script returns the right value of 320.
Where’s the problem? window should be the exact viewport siza but it returns 15px less in my script. why?

here the script

$(window).resize(function() {
    var b = $("#resize_debugger")
    var html = $("html").width();
    var body = $("body").width();
    var doc = $(document).width();
    var win = $(window).width();
    b.html("h: "+ html + ",b: "+ body + ",d: "+ doc + ",w: "+ win)
});

thx for your job and for your teaching! :)

Reply ↓

Joss Post authorJan 30th, 2012 at 7:37 am

Hey, thanks for the great comment. Looks like it might be something to do with the scrollbar width being included in calculations? I haven’t looked closely into how jQuery gets the window width and how this relates to media queries, but you could try replacing $(window).width with the basic window.innerWidth which uses the property of the native browser object (no jQuery needed)

Hope that helps!

Reply ↓