This is the excellenteasy development blog, a publication about the mobile web.

How to target physical pixels on retina screens with CSS

by Stephan Bönnemann

As announced last week we have recreated the iOS 7 UI with CSS for use in our internal mobile app framework. Today I want to share a technical challenge I encountered along the way and its solution.

When you try to get the available width of an iPhone with retina screen the browser reports back 320 pixels, even though it has 640 physical pixels. Web developers don't need to adjust every webpage for retina screens, because the content is just displayed in the same physical size, but much sharper. This works for everything except images/bitmaps, but in the past we have read and learned everything on how to tackle this problem. I mean there is an entire book about this topic.

You might think that in the meantime handling retina is old news, but think again. With Apple's latest version of iOS they dropped support for the iPhone 3GS and now it runs exclusivly on retina phones. This seems to be reason enough for them to target physical pixels within their UI.

Upscaled screenshot of the Apple Clock app

The (upscaled) iOS 7

You can't simply specify a border of 0.5px

The navigation bar now has border at the bottom that is one physical pixel thick. Trying to do the same with CSS adds a whole new complexity level to the retina problem. Continue Reading …