How to capture a website at iPhone 16 Pro screen size in Safari

There are two ways to capture a website at iPhone 16 Pro screen size in Safari, depending on what you need:

For a screenshot of the real page on an iPhone: open it in Safari, take a screenshot, then choose Full Page if you want the whole webpage. Save the result as an image or PDF.
For a developer preview: use Safari’s Responsive Design Mode on a Mac and choose or enter the iPhone 16 Pro portrait reference: 402 × 874 points at 3×, equivalent to 1206 × 2622 pixels.

These methods answer different questions. A physical iPhone captures real Safari behavior. Responsive Design Mode helps inspect a responsive layout, but its presets are approximations. For a closer preview, use Open with Simulator.

1. Choose the kind of capture you need

Goal	Use	What you get
Record what the page actually looks like on an iPhone 16 Pro	Safari on the phone	A screenshot of the visible screen, or a Full Page capture saved as an image or PDF
Check how a layout responds to iPhone-sized dimensions	Safari Responsive Design Mode on Mac	A developer preview at a selected viewport and pixel ratio
Capture a page programmatically or as part of an automated workflow	A screenshot API	An image or PDF returned from a request

Do not treat the iPhone’s display pixels, design points, CSS viewport, and visible area below Safari’s browser controls as interchangeable. They describe different measurements.

2. Take a screenshot in Safari on iPhone 16 Pro

Open the website in Safari on the iPhone and wait until the content you want has loaded.
Press and quickly release the Side Button and Volume Up button together.
Open the screenshot preview or controls.
For the currently visible screen, keep the standard screenshot and crop it if needed. For a long webpage, choose Full Page.
Review the long capture, then save it as an image to Photos or choose Save PDF to Files.

Apple describes Full Page as a way to capture content beyond the screen, such as an entire Safari webpage. The preview controls differ across iOS versions: the current support guide distinguishes the full-screen controls in iOS 26 from the thumbnail interface in iOS 18 and earlier. If the controls on your phone look different, follow the labels shown in your installed iOS version.

Visible screen or Full Page?

A standard screenshot records the screen as displayed at that moment. Choose Full Page when you need the webpage beyond the current viewport in one document. Full Page is a long-page capture; it does not mean the browser showed the entire page on the physical display at once. Turning the phone to landscape shows more of the page in the visible area, but it is not a substitute for Full Page capture.

3. Preview the iPhone 16 Pro layout in Safari on Mac

Open the site in Safari on macOS.
Enable Safari’s developer tools if they are not already available.
Open Responsive Design Mode.
Select an appropriate device preset, or enter the iPhone 16 Pro portrait reference dimensions: 402 × 874 points with a 3× pixel ratio.
Inspect the page at that size. Check key breakpoints, navigation, text wrapping, images, and forms.
For a closer device preview, choose Open with Simulator if available in your workflow.

Apple’s design reference lists the iPhone 16 Pro portrait canvas as 402 × 874 points, or 1206 × 2622 pixels at 3×. The phone’s physical display specification is 2622 × 1206 pixels at 460 ppi, with a 6.3-inch diagonal; portrait and landscape orientations swap the pixel axes. These physical display figures do not mean a webpage has a 1206-pixel-wide CSS viewport.

Responsive Design Mode presets are a useful approximation, not a guarantee of exact layout, rendering, or behavior on the phone. Browser controls, keyboard state, and device-specific form behavior can affect what a person sees. Use Simulator for a closer preview and a physical device when you need to verify actual Safari behavior.

Why 402 points is not 1206 CSS pixels

Points are a design measurement; the 3× scale maps 402 × 874 points to 1206 × 2622 physical pixels. CSS layout uses viewport dimensions and browser behavior, not simply the panel’s physical pixel count. Safari’s visible content area may also change as browser controls or the keyboard appear. For pages designed for iPhone, Apple’s archived viewport guidance recommends width=device-width so the layout viewport follows the device width. The archived guide’s old default viewport figure should not be used as a guaranteed current iPhone 16 Pro value.

4. Capture an iPhone-sized screenshot with a website screenshot API

If you need a repeatable image file, a scheduled capture, or a screenshot in a script, use a screenshot API that accepts a URL and viewport dimensions. The following ScreenshotNeo example requests the iPhone 16 Pro portrait reference size and a 3× output scale. See the ScreenshotNeo API documentation for its request options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=402 \
  -d height=874 \
  -d device_scale_factor=3 \
  -d format=png \
  -o iphone-16-pro.png

Keep the API key private. Replace https://example.com with the page you are authorized to capture. The viewport options model the portrait design reference; they do not reproduce every detail of Safari’s visible browser area or device-specific behavior.

Python

import requests

response = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com",
        "width": 402,
        "height": 874,
        "device_scale_factor": 3,
        "format": "png",
    },
    timeout=90,
)
response.raise_for_status()
with open("iphone-16-pro.png", "wb") as image_file:
    image_file.write(response.content)

Node.js

const query = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '402',
  height: '874',
  device_scale_factor: '3',
  format: 'png',
});

const response = await fetch(`https://api.screenshotneo.com/v1/shot?${query}`);
if (!response.ok) {
  throw new Error(`Screenshot request failed: ${response.status} ${await response.text()}`);
}
const image = Buffer.from(await response.arrayBuffer());
await import('node:fs/promises').then(({ writeFile }) => writeFile('iphone-16-pro.png', image));

Use an image format such as PNG, JPEG, or WebP for a screenshot, or request PDF when you need a document. For a true full-page capture, request full-page behavior rather than relying on the viewport height alone. A tall full-page image can be much larger than a viewport screenshot.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF; this example requests the iPhone 16 Pro portrait reference viewport. See the API documentation for the available parameters.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d width=402 \
  -d height=874 \
  -d device_scale_factor=3 \
  -d format=png \
  -o iphone-16-pro.png

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives Claude, Cursor, and other MCP clients tools to take screenshots, inspect page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

6. Configuration choices that affect the result

Need	Option to consider	Effect or caveat
Portrait layout preview	402 × 874 viewport, 3× scale	Matches Apple’s iPhone 16 Pro portrait design reference; it is not a complete physical-device simulation.
Landscape layout	Swap the viewport axes	Check responsive behavior separately; the visible area and browser controls differ from portrait.
Entire webpage	Full-page capture	Captures content beyond the viewport. Lazy-loaded sections may need time or scrolling to appear.
One component	Capture a CSS-selected element	Useful for a card, chart, or widget; ensure the selector matches a visible element.
Dark appearance	Dark-mode capture	Check that the site responds to the preferred color scheme and that assets remain legible.
Stable dynamic content	Wait for a selector, delay, or network idle	Choose a readiness condition that matches the page. Network activity may never become idle on sites with polling.
Remove obstructing page elements	Hide selectors or click an element before capture	Useful for dismissing a drawer or focusing the page; avoid selectors that remove content you need.
Consistent environment	Custom user agent, headers, cookies, timezone, or geolocation	Use only the values needed to reproduce the intended visitor context.
File and delivery needs	PNG, JPEG, WebP, PDF; resizing or transparent background where supported	Choose based on whether you need pixel fidelity, smaller files, or a document.

ScreenshotNeo also supports custom CSS and JavaScript, request and resource blocking, caching with a chosen TTL, signed public image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, and a usage API and OpenAPI specification. The API accepts parameter names used by other screenshot APIs to make switching easier. Check the docs for exact parameter names and valid values before building an integration.

7. Troubleshooting

Symptom	Likely cause	What to do
There is no Full Page option	The capture context or page does not expose a long-page preview, or the iOS controls differ.	Make sure the screenshot was taken while viewing the webpage in Safari, open its preview controls, and check the steps for your iOS version.
The saved capture cuts off before the footer	A visible-screen screenshot was saved instead of Full Page, or lower-page content did not load.	Repeat the capture and choose Full Page. Scroll the page first if content loads only when it enters view.
The developer preview does not match the phone exactly	Responsive Design Mode approximates device layout; browser chrome, keyboard state, and device-specific form behavior can differ.	Use Open with Simulator for a closer preview, then verify critical interactions on a physical iPhone.
Text wraps differently than expected	The configured CSS viewport, zoom, font loading, or page viewport metadata differs from the target.	Check the viewport meta tag, use the 402-point reference width, wait for fonts, and compare with a device.
An API screenshot is blank or incomplete	The page may still be loading, require cookies or authentication, or depend on scripts and resources that are blocked.	Set the required cookies or headers, wait for a page selector or suitable delay, and review the response verdict and billing headers.
The API request fails or returns an error	Missing or invalid API key, malformed URL, unsupported option, or an inaccessible page.	Check the key, URL encoding, and option names against the docs. Inspect the HTTP status and response body instead of saving an error response as an image.
Full-page API output is unexpectedly huge	The document is long or high-density output multiplies pixel dimensions.	Use a viewport screenshot when the task only needs the first screen, or resize output if appropriate.

8. Performance, reliability, and cost

For a single manual screenshot, the built-in iPhone workflow is the shortest path and does not require a screenshot service. Responsive Design Mode is useful for repeated layout checks during development. An API is a better fit when captures need to run from scripts, jobs, or batches.

Full-page captures take longer and produce larger files than viewport captures, especially at 3× scale. On dynamic sites, wait for a meaningful selector or a short delay rather than assuming the initial navigation means all content is ready. A network-idle condition can be a poor fit for pages that continually poll or load analytics.

For automated captures, handle timeouts and failed responses, keep credentials out of client-side code, and save files only after confirming the response succeeded. If a page depends on login state, supply the necessary authorized cookies or headers. For recurring or bulk work, caching can reduce repeated captures; choose a TTL based on how often the page changes. ScreenshotNeo’s billing behavior distinguishes clean captures from bot checks, blank pages, timeouts, failed loads, and cache hits through response headers.

ScreenshotNeo pricing is $0 for 1,000 shots/month, Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. For a one-off personal capture, no paid API is necessary; choose a paid plan only when the API workflow and volume justify it.

Frequently asked questions

What is the iPhone 16 Pro Safari viewport size?

Apple’s design reference gives a portrait canvas of 402 × 874 points at 3×, corresponding to 1206 × 2622 physical pixels. The visible webpage area can vary with Safari controls and device state.

Can Safari save a full webpage screenshot on iPhone?

Yes. Take a screenshot while viewing the page in Safari, select Full Page in the screenshot controls, then save the result as an image or PDF.

Does Responsive Design Mode reproduce the exact iPhone 16 Pro?

No. It approximates the layout and behavior. Simulator is a closer preview, and a physical device is the reference for actual Safari behavior.

Does landscape mode make a full-page screenshot?

No. Landscape changes the visible layout and shows more page area at once. Choose Full Page to capture beyond the current screen.