Skip to main content

Media Query Bookmarklet

07-13-11 Rob Tarr

We created this bookmarklet to aid in designing responsive websites. Now you can always know what media query just triggered. Never again will you lose track of where you are.

One thing that I quickly noticed when we started building responsive websites was that we were constantly resizing our browsers. We would resize the browser to the largest media query, and then step down and watch the changes so we knew what media query we were looking at. This is not a good way to design a website. I figured that if we had a tool that would show us exactly what size the viewport was, we would know what media queries would be active. Taking it one step further, I thought why shouldn’t the tool just tell me which media query just fired?

So, I wrote this little bookmarklet. It parses the included CSS files of the current page and creates an array of media query declarations. It then sets up listeners using the matchMedia method to trigger events when media queries change.

Get the Bookmarklet

Browser Support

The page dimensions should work in any modern browser. Media query display is supported in:

  • Chrome 9+

  • Safari 5.1.5

  • iOS 5.1.1

Updates

6/26/12 Version 1.3 Updates

  • No longer displays duplicate media queries

  • “Close” button added to remove element from display

  • Toggle added to move element from right-hand to left-hand of display

Sparkbox’s Development Capabilities Assessment

Struggle to deliver quality software sustainably for the business? Give your development organization research-backed direction on improving practices. Simply answer a few questions to generate a customized, confidential report addressing your challenges.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development