Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
I think you mean iPhone4/4s and the iPhone3. –  DA01 Nov 1 '11 at 19:25
add comment

2 Answers 2

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.

share|improve this answer
    
But what is the "resolution of the browser" of the iPhone 3 vs 4? Is it the same –  Chris Muench Nov 2 '11 at 12:24
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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