Grow your CSS skills. Land your dream job.

The best iPhone for responsive development of all iPhones ?

  • # April 16, 2013 at 11:20 pm

    (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?

    # April 17, 2013 at 5:02 am

    Can’t you find an emulator online?

    Actually, don’t Apple offer one?

    # April 17, 2013 at 5:10 am

    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.

    # April 17, 2013 at 5:19 am

    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?

    # April 17, 2013 at 5:29 am

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

    # April 17, 2013 at 5:30 am

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

    QFT.

    # April 17, 2013 at 5:33 am

    @Paulie_D,

    The official iPhone SDK runs only on mac.

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

    @CrocoDillon,

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

    # April 17, 2013 at 5:47 am

    >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.

    http://www.businesswire.com/news/home/20130128005593/en/Strategy-Analytics-Android-Apple-iOS-Capture-Record

    Heck, I’d call that dominating.

    # April 17, 2013 at 6:16 am

    @Paulie_D,

    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.

    # April 17, 2013 at 10:28 am

    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.

    # April 17, 2013 at 11:01 am

    @Senff,

    Thanks for the helpful info and advise!

    # April 17, 2013 at 2:47 pm

    see also: http://www.browserstack.com/

    # April 17, 2013 at 2:57 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".