How much of the screen iPhone users actually see in Safari

On a current iPhone, Safari shows your page in about 82–84% of the screen's height when it first loads. An iPhone 17 Pro has a 402×874 CSS px screen, but the status bar (62px) and iOS 26 Safari's compact bottom bar (94px) leave 718px for the page. Once the visitor scrolls, the bars shrink and the page gains about 36px.

Below: the numbers for every current iPhone, and the CSS changes they call for.

Where the pixels go

Safari on iOS 26 defaults to the compact tab bar, which puts the address bar at the bottom of the screen. On first load, with the bars fully expanded, the page loses space at both ends:

These come from the device data behind doesitfit's Browser bars mode. The iPhone 16 Pro was measured directly: a 402×874 screen gives 718px of visible page. After scrolling, the bars shrink and the page gains about 36px, so roughly 754px.

Visible height on every current iPhone

Visible height = screen height − status bar − Safari's bar. Only the iPhone 16 Pro row was measured; the rest apply the same bar heights to each screen, so treat them as first-load estimates.

So the "fold" on an iPhone sits somewhere between 583 and 800px, and on the most common current sizes it's around 700–720px. The screen-size pages have the full detail for each: 402×874, 440×956, 393×852, 390×844 and 375×667. Every model is listed on the iPhone hub.

On their side

In landscape the status bar goes away, Safari shows a compact address bar at the top (about 44px) and leaves a strip for the home indicator at the bottom (about 21px). These are estimates:

That's tablet-layout width with only 325–375px of height. Your md or tablet layout, sticky header and all, is what shows up here. There's a media query for exactly this case in responsive breakpoints in 2026.

Compared with Android

Chrome on Android takes a device-specific status bar, a 56px toolbar and a 24px gesture bar. A Pixel 10 (924 tall) keeps about 924 − 58 − 56 − 24 = 786px; a Galaxy S25 (780 tall) about 780 − 40 − 56 − 24 = 660px. When the visitor scrolls, Chrome hides its toolbar and the gesture chin and the page gains about 80px.

What it means for your design

Above the fold is about 700px, not 874

If your headline, one line of explanation and the main button fit in the top 580px of the page, they're visible on every iPhone in the table, including the SE. Fit them in 700px and they're visible on every current model. Design mockups at 402×874 with no browser bars drawn in are about 156px too optimistic.

100vh is taller than what's visible

Safari sizes 100vh to the large viewport, the one you get after the bars have shrunk (web.dev explains the three viewports). On first load that's taller than the 718px the visitor can see, so the bottom of a height: 100vh hero, often exactly where the button is, sits under Safari's bar.

The newer units fix it:

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits with Safari's bars showing */
}

svh is the small viewport (bars showing), lvh the large one (bars hidden), and dvh follows the bars as they move. svh is the calm choice for a hero; dvh resizes while people scroll, which can make the page jump. All three have worked in Safari, Chrome and Firefox since 2022. The full story, including fallbacks, is in 100vh on mobile is broken, and the units are documented on MDN's CSS length page.

Fixed bars come out of the same 718px

Every fixed element eats into what's left. On an iPhone 17 Pro:

• a 64px sticky header leaves 718 − 64 = 654px
• add a 72px sticky "Buy now" bar and you're down to 582px
• add a cookie banner and the page itself may barely be visible

Keep one fixed bar at most, and keep it slim.

Fixed bottom buttons and the home indicator

If you want a full-screen look, where your page's colours run under the status bar and home indicator, you opt in with viewport-fit=cover in the meta viewport tag. Then pad anything fixed to the bottom with the safe-area inset, so it clears the home indicator once Safari's bar shrinks away:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

/* Leave room so the last bit of the page isn't hidden behind the bar */
body {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

env() and the safe-area variables are documented on MDN, and WebKit's own guide is Designing Websites for iPhone X. It's old, but the safe-area rules it introduced still apply.

Measuring it in JavaScript

If a script needs the visible height, don't use screen.height: on an iPhone 17 Pro that's 874, bars and all. window.innerHeight gives the height of the page's viewport and changes as Safari's bars shrink and grow, firing a resize event each time:

function showViewport() {
  console.log(`${window.innerWidth} × ${window.innerHeight}`);
}
window.addEventListener('resize', showViewport);
showViewport();

The on-screen keyboard is a separate story. When it opens, iOS Safari doesn't shrink the layout viewport; the Visual Viewport API (window.visualViewport.height) is what tells you how much is left above the keyboard. Keep that in mind for forms with a submit button pinned to the bottom.

The iPhone Duo is a different case: on its outer screen Safari's buttons live in a strip down the side, so pages get 382px of width. See iPhone Duo for web developers.

See it on your own site

Three quick ways to check:

1. On a real iPhone: open /whats-my-viewport in Safari. It shows the width and height a page actually gets on that phone, live, in CSS pixels.
2. Without an iPhone: turn on Browser bars in doesitfit. It draws the status bar and Safari's bar at the heights above on every iPhone at once, so the page area you see is the visible area, not the whole screen. Add Rotate for landscape. More options in testing on mobile without a phone.
3. In DevTools: set a custom size of 402×718 rather than 402×874. It's crude, but it shows the first-load fold properly.

What to take away

• On first load, iPhone users see 583–800px of height, and about 700–720px on the most common current models.
• The iPhone 17 Pro's 874px screen gives 718px of page (measured on the same-size 16 Pro), about 754px after scrolling.
• On their side, current iPhones show only about 325–375px of height.
• Use 100svh instead of 100vh for anything that must fit on first load.
• Budget fixed headers and bottom bars out of the visible height, and pad bottom bars with env(safe-area-inset-bottom).