Mobile Web application graphic design

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


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.

Source : Link , Question Author : Chris Muench , Answer Author : DA01

Leave a Comment