Forums

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
    Posts
  • #44165
    IanY
    Participant

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

    #132055
    Paulie_D
    Member

    Can’t you find an emulator online?

    Actually, don’t Apple offer one?

    #132057
    IanY
    Participant

    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.

    #132061
    Paulie_D
    Member

    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?

    #132062
    CrocoDillon
    Participant

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

    #132063
    Paulie_D
    Member

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

    QFT.

    #132065
    IanY
    Participant

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

    #132071
    Paulie_D
    Member

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

    #132082
    IanY
    Participant

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

    #132139
    Senff
    Participant

    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.

    #132140
    IanY
    Participant

    @Senff,

    Thanks for the helpful info and advise!

    #132177
    dfogge
    Participant
    #132179
    Anonymous
    Inactive

    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.