I recently released my first web app ported to the iPhone and Android devices. Only a couple days after deploying it, I found out about the increased DPI on the new iPhones.
Once I got my own iPhone 4 to test with, I noticed a huge problem with my web app. The images all looked pixelated against the beautiful text on the display. Not wanting to redo the CSS and header to define a larger viewport, I started to look for better solutions.
I decided to put larger images into the page than the tags were coded for. This way, the images would be resized smaller for the iPhone gen 1, 2, and 3. But for the iPhone 4, it would “zoom” the image to native resolution.
- Figure out the ratio that you need to increase all your images by. This is the formula that I used… (960 / (viewport width)) * (image dimension). My viewport was set to 320px and my image was 280px, so my equation looked like this: (960/320)*280. So, I created new images that were 840px wide.
- Since I already had my image tags defined with the appropriate height and width, I just saved the larger images as the same file names.
- Success.
This turned out really great, the iPhone does a fantastic job at scaling images, so it looks great on the older iPhones and looks fantastic on the new ones. Check out the demo.
How to find the viewport on your web app.
<meta name=”viewport” content=”user-scalable=no, width=320” />
If you are using “device-width” as the viewport width, assume 320.
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
A CSS based alternative solution
The folks at sitepoint suggest a CSS alternative that I believe is probably better if you are still in the development phase of your project. Razor-sharp Images in Mobile Safari on iPhone 4
The only flaw I see in their solution is formula that they use to calculate image size. Their double the size method does not accommodate for horizontal mode on the phones.
Old iPhone, before hack
Old iPhone, after hack
iPhone 4, before hack
iPhone 4, after hack
