(Question has been modified according to [Senff's reply](#Comment_100298 “”).)
Currently iPhones have
three different resolutions:
If I need to choose an iPhone for responsive web development, is it possible that one of them can cover
the other two? Or I have to buy three iPhones in order to check three resolutions?
I’m pretty sure that the iPhone SDK has a pretty good emulator that’s cross-platform.
I believe it’s free you just have to sign up.
Buying a phone seems like an awfully expensive way to operate….how do you test on non-iPhones/tablets? Surely you aren’t buying every one of those?
>Currently I only take the most popular brand into account, and that’s iOS.
Wow. You’re going to **ignore** Android and WinPhones because they aren’t “popular”
According to FairSearch (Strategy Analytics), Android had, like 70%+ of the market in smartphones at the end of 2012. I’d call that popular.
Heck, I’d call that dominating.
It looks like my information was outdated. Sorry. But according to [StatCounter](http://gs.statcounter.com/#mobile_os-ww-daily-20121201-20121231-bar “Top 8 Mobile Operating Systems from 1 to 31 Dec 2012″), Android’s market share is 33% at the end of 2012.
As for Windows Phone, personally I will forget about it for now.
You’re listing the number of pixels on the iPhone screens, but that’s not what the resolutions are. It mostly applies to text rendering.
iPhone 3 is 320×480, both in pixels and resolution.
iPhone 4 is 320×480 in resolution, but it uses 640×960 pixels to draw that.
iPhone 5 is 320×576 in resolution, but it uses 640×1152 pixels to draw that.
Basically, iPhone 4 and 5 use FOUR screen pixels to draw ONE resolution pixel. It’s a bit of a tricky concept to wrap your head around, but put it like this.
Let’s say the letter M on an iPhone 3 is drawn using 10 by 10 pixels. On screen it will look (say) 3mm by 3mm.
On an iPhone 4 and 5, it will still be 3mm by 3mm, but RENDERED with 20 by 20 pixels to make it look sharper.
This is done automatically, and does not need any adjustments in your code.
So when it comes to text, newer iPhones just use more pixels to make things look the same physical size.
A little different with images in sites. I think (and I’m not entirely sure about this), when it comes to images, newer iPhones keep using the number of pixels (not the same physical size). So a 200×200 image will look larger on an iPhone 3 (say, 4cm by 4cm) than on iPhone 4/5 (2cm by 2cm).
Here’s an extensive article about this whole thing: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Anyways, large explanation that doesn’t matter much — what I’m trying to say is that the resolutions of the iPhone 4/5 are still 320×480 and 320×576, not the double amount of that (again, that’s just the number of technical pixels in the screen technology).
I say, get an iPhone 5, that should be enough most of the time, especially if you also test it in your actual desktop browser by resizing your screen.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".