Mobile Safari on iPhone 5: Visible area size?

32,765

Solution 1

iOS6

According to Kyle Larson's article iPhone 5 Web Design, the resolutions are:

  • Portrait: 640 × 888 px (= 320 × 444 double px)

  • Landscape: 1136 × 392 px (= 568 × 196 double px)

That is with navigation bar, i.e in default configuration, like I wrote in my question.

iOS7

According to @astletron, the resolutions are:

  • Portrait: 640 × 920 px

  • Landscape: 1136 × 424 px

Solution 2

Portait:

  • Height - 892 (716 + 176 (the difference between the new and old devices))
  • Width - 640

Landscape:

  • Height - 420
  • Width - 1136
Share:
32,765
feklee
Author by

feklee

XMPP: [email protected] Freenode IRC: feklee PGP 0x5EF8B6017F668171259945D6BEF6EFD38FE8DCA0

Updated on May 18, 2020

Comments

  • feklee
    feklee over 3 years

    What's the size of the visible area in Mobile Safari on the iPhone 5 in default configuration, in landscape and in portrait orientation?

  • feklee
    feklee about 11 years
    Landscape cannot be 640 px in height: There needs to be space for the UI elements at the top and bottom. Also, it would be great if you could give a link to the source of those numbers!
  • Ravi
    Ravi about 11 years
    Oh, sorry - I once created a mobile web that just had an image and I was given these numbers by the UI designer. I updated the landscape numbers. I'm not sure if there is a programmatic way to retrieve the window size of safari.
  • Ravi
    Ravi about 11 years
  • feklee
    feklee about 11 years
    Concerning programmatically: How about window.innerWidth and window.innerHeight? I will mark your question as answered, once I can be certain about the numbers. Without source, I am still hesitant.
  • astletron
    astletron over 9 years
    Worth noting that those figures are for iOS 6. Figures for iOS 7 are 640 x 920 and 1136 x 424 hardware pixels.
  • feklee
    feklee over 8 years
    Please write the size in your answer. A link may rot.
  • yaochiqkl
    yaochiqkl almost 7 years
    width 320 it the same with iPhone4
  • NineCattoRules
    NineCattoRules over 6 years
    Why those iOS7 resolutions? I have iPhone 5 with iOS 10 and resolutions are the same as for iOS6
  • cogell
    cogell over 5 years
    would prefer the double px sizes listed first as they are usually the actionable values people are looking for