What's the size of the visible area in Mobile Safari on the iPhone 5 in default configuration, in landscape and in portrait orientation?
Asked
Active
Viewed 3.3k times
10
-
Fire up your iPhone simulator and screen captures! – Cyrille Sep 17 '12 at 18:27
-
2I may do that, if the simulator would run on my ThinkPad... – feklee Sep 17 '12 at 18:28
-
Check my answer to similar question, might help a little - http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – Dmitry Semenov Mar 30 '13 at 11:26
3 Answers
13
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
feklee
- 7,555
- 9
- 54
- 72
-
2Worth noting that those figures are for iOS 6. Figures for iOS 7 are 640 x 920 and 1136 x 424 hardware pixels. – astletron Jun 13 '14 at 00:47
-
Why those iOS7 resolutions? I have iPhone 5 with iOS 10 and resolutions are the same as for iOS6 – NineCattoRules Aug 31 '17 at 15:08
-
1would prefer the double px sizes listed first as they are usually the actionable values people are looking for – cogell Apr 21 '18 at 18:14
1
Portait:
- Height - 892 (716 + 176 (the difference between the new and old devices))
- Width - 640
Landscape:
- Height - 420
- Width - 1136
Ravi
- 7,929
- 6
- 38
- 48
-
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! – feklee Sep 17 '12 at 18:20
-
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 Sep 17 '12 at 18:25
-
Maybe this will help you: https://developer.apple.com/library/safari/#technotes/tn2010/tn2262/index.html – Ravi Sep 17 '12 at 18:30
-
1Concerning 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. – feklee Sep 17 '12 at 18:31
-1
If you're after general viewport size, iPhone5 portrait width is 320 and landscape width is 568.
TPoy
- 932
- 1
- 11
- 17