Meet dpi.lv: More than you probably wanted to know about screen DPI


Screen Shot 2013-06-10 at 13.41.39

Yesterday (Sunday) I was on a 9.5 hour flight from Canada with no inflight entertainment (well, thanks Air Canada), so I did what every bored human being would do instead of watching movies: I decided to code an app! And out of the infinite set of possible apps somebody can make, I decided to make an app to calculate screen DPI/PPI.

You might be wondering if I’m still (?) sane, but you might be surprised to hear I found myself calculating screen PPIs quite frequently and wanted to save myself the hassle of doing the math every time. I’m a curious person and I wanted to know, even about products I would never buy and even when it wasn’t listed in the tech specs. Yes, my hobbies are somewhat weird. :o

I first thought about doing such an app a while ago, but never found the time to code it. The last time I had thought about it was a few days ago at the SF Apple Store with a friend. We were looking at the 27″ Apple Thunderbolt displays in awe and thought they must have huge pixel density. After a few calculations in the console (which ironically produced a result faster than the Apple guy my friend asked), it turned out it was only …102. “I need to code an app to make this sort of calculation easy! People are being misled by marketing!” I thought.

Fast forward to my flight. You didn’t expect my laptop battery to last for 9.5 hours, right? Yeah, MacBook Air batteries are good, but not *that* good. Of course it eventually died so I had to find other ways to pass my time (I ended up sleeping — or trying to). However, by the time it died, I had gone over the threshold of being able to give it up, so I spent the rest of the day finishing it, despite my obvious jetlag and sleepiness. I was in the zone — You don’t just go sleeping when you’re in the zone, right?

Besides the DPI/PPI calculator, I added a few other fun things too:

  • A list of devices with pre-calculated data (stored in a separate JSON file, which makes it easy to update — *hint, hint*)
  • Wrote a few FAQ items about DPI/PPI.
  • Like many of my apps, it supports link sharing through URL hashes (for examples, check the screens section).
  • I even bought a proper domain for it (dpi.lv) and drew a logo! The logo took hours by itself. Not just to draw it, but to simplify Illustrator’s ugly, repetitive SVG output (which is still better than what most other tools spit out). Hand-simplifying SVG is a meditative experience that I thoroughly enjoy, to the bewilderment of everyone who read my tweet about it. Just for the lulz, here’s the before and the 66% smaller after (the small design tweaks were intentional)
  • The screen that displays the result resizes to reflect the aspect ratio of the resolution you’ve selected. It even animates to it, with CSS transitions! Oh, and it also uses FlexBox to center the text vertically.

Enjoy!

Of course it’s open source (under an MIT license, as usual), and you can fork it on Github, as usual. The JS is a bit of a mess, but I’m too tired to refactor it now. Same goes for the lack of favicon and tagline. Oh well. I still like it. :)

Important: If you are on a display with multiple dots per pixel (e.g. Retina), the resolution (pixel width × pixel height) it tries to guess will be incorrect, so you’ll have to actually input the right one. The default resolution in there is just a hint, it doesn’t mean it’s “broken” if it doesn’t guess right, they’re editable fields. That said, it would be nice to guess right in those cases too, and I will look into it.

  • Pingback: DPI Love | Notebook Heavy

  • Samuel Latchman

    Simple yet useful, thank you! It might be helpful to add to your FAQ that it only tests your main display’s screen, not your secondary ones… Unless I missed something.

    • http://lea.verou.me/ Lea Verou

      The fields are editable, you can input your secondary display resolution manually. Or maybe just move the browser window there and refresh?

      • Samuel Latchman

        Refresh in desired window doesn’t work, but manual input will do, thanks!

        • Johan Dahl

          Moving the browser window to the other screen and refreshing worked fine for me!

  • http://ali.md/ Ali Mihandoost

    Very nice, with some little bug.

  • GreLI

    Actually your logo SVG can by cut by another 78%:
    http://dabblet.com/gist/5750429

    • GreLI

      Oops, I have deleted gist in github and it has been lost in Dabblet.
      http://dabblet.com/gist/5750512
      And thanks to new Disgus politics I can’t edit posts… (I don’t wont to register more then just sign-in via twitter.)

      • http://lea.verou.me/ Lea Verou

        Man, you’re awesome!! SVG yoda!
        Would you submit a pull request for this? Thanks!

        • GreLI

          Well, it doesn’t look so good on my retina iPad. The pixel grid is blurry and edges are slightly misplaced (at least on Dabblet). I believe this is a browser (Webkit) bug: pattern get rasterized and rounding errors accumulate. Dunno if this will work good as the site logo.

        • GreLI

          Just tested with style ‘svg { width: 100% }’ and it looks awful :-(. Browsers are imperfect.

        • http://lea.verou.me/ Lea Verou

          That’s so sad :( It was such elegant code :(
          Yeah, browsers have many issues with SVG, as fewer people use it than say, CSS or HTML. Did you report the bug to WebKit? If not, you should, it will make it better in the future :)

        • GreLI

          It seems that every browser has the issue with blurriness. It isn’t only the Webkit issue. I suppose they optimize a pattern, so it become not true (or at least trueish enough) vector graphics.

        • GreLI

          Well, I reworked it with 100px image size in mind. It still has some blurring on retina or with non-100% scaling, but it’s much better now. I think it has ok quality:

          http://dabblet.com/gist/5755673

          BTW, now it has more accurate pixel grid ;-).

  • ScionicSpectre

    Hah, I don’t know what’s more fascinating- the application, or the psychological context you’ve described. I’ve actually been looking for something like this, so thanks.

  • anonymity86

    I feel like starting a kickstarter fund to bribe airlines to turn off their entertainment systems on all flights Lea is on, so that we can have more projects like this one!

  • Danek

    I love the idea and UI.
    There’s similar project:
    http://screensiz.es/
    I found it just recently, but unlike dpi.lv it only contains info, without option to calculate…

    Keep up the great work!

  • horst

    Lea, thanks very much for that.

    And also for all that other stuff here on your site. It is really amazing. Have found it first time yesterday and have tested contrast ratio for my new personal website I’m currently working on. Very useful, my new site now is 1.2 points better than before ;-) Thank you.

  • rsanchez1

    This is a very nice tool. The one confusing thing about it is that it sets your diagonal to 13.3″ by default, and I didn’t know you could change it, I thought it was calculated like the resolution.

    Maybe labeling that field to tell the user it must be set would be a good idea.

  • ms

    Lea, add some validation – now we can put number below 0 into inputs :)

  • gjquan

    Very nice little tool!

    I built something similar that displays the dpi, dppx, and webkit-device-pixel-ratio for the device you are using: http://gregquan.com/detect/

  • http://www.minecraftgames.co/ Minecraft Games

    The details are well-explained and very concise.

  • http://beben-koben.blogspot.com/ Beben Koben

    usually, created usefully stuff
    thanks ^_^

  • Freddywang

    Is dppx similar to devicePixelRatio? Chromebook Pixel should have ratio of 2. If those are the same thing, dppx should be 2 instead of 1.

    You can refer to this list:
    http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

  • Binyamin

    @LeaVerou:disqus, congrats! How did you minify your Illustrator SVG image, done with some tools or hand coded? By the way .lv is Latvian domain, country where I come from. ;)

  • Pingback: | ☆ミ Style Venus Blog

  • Philipp Schaffner

    Hi Lea!
    Would you consider clarifying the described question in relation to dpi.lv on https://drupal.org/node/1741498?page=1#comment-8001515, please?

  • http://www.friv2friv3friv4.com/ friv 2 friv 3 friv 4

    It seems that every browser has the issue with blurriness. It isn’t only the Webkit issue. I suppose they optimize a pattern, so it become not true.

  • Rutvik Tailor

    Awesome Tool Thanks For Making It

  • Abhilash Goje

    I was trying dpi.lv on my mobile phone. Seems like it fails to give the actual dpi there. The website loads in a zoomed out state and does all the calculations with respect to that state. This must be be because of absence of tag.

  • http://www.friv2.org/Flappy_Bird.html flappy bird

    It’s an honor to read high quality content these days. This article has
    all the qualities of great professional material I was taught in
    college.

  • http://techbtfl.com/ Courtney Payne

    Awesome resolution reference. Merci