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

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

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

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

    1. Joss Post author

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

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

  3. Pingback: Responsive Design bookmarklets « Ramblebramble's Weblog

  4. teo

    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
    1. Joss Post author

      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
  5. Pingback: Welsh Pilgrimage to Lourdes site goes responsive | Web design Port Talbot, Neath, Bridgend, Swansea, Cardiff, South Wales, UK

  6. Pingback: Responsive Design Testing

  7. Pingback: Window Size bookmarklet to test/debug CSS3 Media Queries – Joss Crowcroft » Web Design

  8. Pingback: Media Query testing – Responsive web sites | Raj Subramanian

  9. Pingback: Brilliant Bookmarklets

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>