Mobile Safari on iPhone 5: Visible area size?

Question

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

Breast

Fire up your iPhone simulator and screen captures! – Gt

I may do that, if the simulator would run on my ThinkPad... – Breast

Check my answer to similar question, might help a little - #8206312 – Aitken

Answer 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

Breast

Worth noting that those figures are for iOS 6. Figures for iOS 7 are 640 x 920 and 1136 x 424 hardware pixels. – Totter

Why those iOS7 resolutions? I have iPhone 5 with iOS 10 and resolutions are the same as for iOS6 – Yaupon

would prefer the double px sizes listed first as they are usually the actionable values people are looking for – Silly

Answer 2

Portait:

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

Landscape:

• Height - 420
• Width - 1136

Stere

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! – Breast

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

Maybe this will help you: developer.apple.com/library/safari/#technotes/tn2010/tn2262/… – Stere

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

Answer 3

Just keep in mind that screen resolution ≠ browser viewport due to pixel ratio being more than 1:1

For anyone who needs more recent info on visible view port (without scroll) for iPhones don't forget to substract:

• system status bar (top): 20
• URL bar (top or bottom): 44
• spacing (in between): 10
• Safari icons bar (bottom): 44

Of course in newer iOS the URL bar minimizes (only 20) when scrolling down and icons bar disappears completelly. But I recommend focusing on minimal fit, for example iPhone SE 2 it would be:

• screen Size: 750px × 1334px
• fullscreen viewport Size: 375px × 667px
• realistic minimum viewport: is only 375 x 549 px

Some designers make mistake of forgetting this and typically modals have [x] icon outside visible area :)

Saretta

Answer 4

If you're after general viewport size, iPhone5 portrait width is 320 and landscape width is 568.

Weighty

Please write the size in your answer. A link may rot. – Breast

width 320 it the same with iPhone4 – Cantabile