Supporting high-dpi pixel-dense displays like iPhones/iPad with CSS or IMG

http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx

by joeyespo • 14 years ago

22 3 14 years ago

joubert• 14 years ago

and if you're dealing with <canvas> —http://joubert.posterous.com/crisp-html-5-canvas-text-on-mob...

connor• 14 years ago

Good article to a very common problem. The only thing I'd add- use CSS when possible instead of an image. I often see low resolution shapes as images (like rounded buttons for example) that could easily just have been done in CSS- which look great on any resolution and all modern browsers.

ars• 14 years ago

I think this should be done by using content negotiation. The browser should include a header with the desired resolution (in DPI, not screen pixel width).

The server should then redirect to a new image url (to maintain caching). Something like images/foo.png;dpi=100

Or, perhaps better:

    <img src="images/foo.png" dpi="100 70 200">

A browser with support for the dpi attribute would pick the best one from the list, then send a request for an image:

    images/foo.png?dpi=100

Older browsers would use the regular image. This would avoid the redirect and the need for special programming on the server (which is hard with ordinary hosting).

One thing that would still need to be worked out is the scaling factor for pixel sizes written in the css for the image.

Supporting high-dpi pixel-dense displays like iPhones/iPad with CSS or IMG

Related Stories