The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS The best iPhone for responsive development of all iPhones ?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #44165

    (Question has been modified according to [Senff’s reply](#Comment_100298 “”).)

    Currently iPhones have two three different resolutions:

    • 320 × 480 (iPhone/iPhone3G/iPhone3GS/iPhone4/iPhone4S)
    • 320 × 568 (iPhone5)

    • 320 × 480 (iPhone/iPhone3G/iPhone3GS)
    • 640 × 960 (iPhone4/iPhone4S)
    • 640 × 1136 (iPhone5)

    If I need to choose an iPhone for responsive web development, is it possible that one of them can cover another the other two? Or I have to buy two three iPhones in order to check two three resolutions?


    Can’t you find an emulator online?

    Actually, don’t Apple offer one?


    Those emulators don’t work like real iPhones. They are just iframes.

    My desktop computer is pc, not mac. I cannot use Apple’s simulator.


    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?


    That’s why you don’t design for devices, but for resolutions ;)


    >That’s why you don’t design for devices, but for resolutions.




    The official iPhone SDK runs only on mac.

    Currently I only take the most popular brand into account, and that’s iOS.


    That’s a truth. Yet sometimes things which involve touch events/functionaities still need to be checked on real iOS.


    >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]( “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:

    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.



    Thanks for the helpful info and advise!


    Two words, “device agnostic”. Never design for devices, design for content. When you’re resizing your browser and the content starts to look jacked, make a breakpoint and fix it. RWD means the content is “fluid” all the way up and down – regardless of device.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.