Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Chris Coyier shared a fascinating post describing a bug that only appeared on low-resolution devices. The post brings up the interesting problem of low-resolution devices. I usually work on a MacBook Pro and a decent monitor so that I rarely see and check the things I build in lower resolutions.

Developer tools offer ways to emulate lower DPR (device pixel ratio), and tools such as dpilove indeed show different resolution values after adjusting the DPR. However, the website still looks sharp and crisp on my MacBook. I wonder if I'm missing something here?

Comparison of dpilove with different emulated device pixel ratio emulations. The result looks the same.

After reading Chris' post, I learned that you can enable low-resolution mode when developing on a high-resolution Mac. Open the app information for your browser, tick the box for "Open in Low Resolution" and start the application.

Comparison of Chrome canary open in "normal" mode and low resolution. Is shows different screen resolutions.

When you then open the app (my example shows Chrome Canary), you see a clear visual difference. The website is rendered in low resolution, everything is a bit "blurry", and even the browser frame and controls are not rendered in sharp retina style anymore.

That's good to know for future debugging sessions that deal with device pixel ratio!

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles