This is a live redesign. If something looks broken, it probably is. Tell me?

Quickly test your HiDPI media queries on a 1x PC or Mac

If you want to do a quick check whether your high resolution media queries are working, but you don't have a retina tablet at hand, here's a nice little trick for you:

  1. Open Firefox
  2. Go to about:config (and sign with your blood that you know what you're doing and will be super careful)
  3. Search for "PixelsPerPx"
  4. Change the value to "2" for a 2x resolution simulation

Firefox will now render everything at twice its size (2 screenpixels for every 1 CSS pixel, if you will). You can verify it's working with something like

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
body {
background-color: pink;
}
}

That's it, Happy testing!

Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated hourly).

Webmentions

No mentions yet.