The resolution of the iPhone 4/4s is 960x640 and the the iPhone 3gs is 480x320. How does one go about designing web pages for mobile devices with all sorts of different resolutions? Do the mobile browsers treat pixels differently?

  • I think you mean iPhone4/4s and the iPhone3.
    – DA01
    Nov 1, 2011 at 19:25

2 Answers 2


iPhone 4+ is called 'retina' display. It, indeed, has twice the pixels, but it's not usually a concern for the designer other than, if they so choose, they can provide those with retina displays higher resolution images to give it a crisper look. Apple was smart and pretty much treats the retina display like the standard display in terms of rendering web pages. In otherwords, a web page on both devices looks the same physical size (rather than it being rendered extremely small on the Retina display).

Google 'designing for retina display' and you will find all sorts of tutorials that show you how handle the CSS for retina iPhones.

Apple's decision to exactly double the x/y amount of pixels and let most of that be automated is a great thing for us web devs. What's not so great are some other high-PPI devices coming on to the market that don't particularly identify themselves as high-PPI. So in those situations, you end up with really small type and such.


I had the same question before I started designing web app for one of the startup. The fact it it wont matter because the experience is different for browser page vs native app. I used normal images saved as .jpeg or .png with regular 72 dpi on my pages...they render totally fine.

  • But what is the "resolution of the browser" of the iPhone 3 vs 4? Is it the same Nov 2, 2011 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.