How to Capture a Website Screenshot at iPhone 15 Pro Viewport Size

To capture a website screenshot at iPhone 15 Pro viewport size, open the page in Safari on a Mac, enter Responsive Design Mode with ⌃⌘R, set the viewport size and pixel ratio, then use the Mac screenshot tool to save the preview. For a closer iOS rendering check, open the page in Simulator. For the actual browser state on an iPhone, enable Web Inspector and inspect the connected device from Safari on your Mac.

Do not use the iPhone 15 Pro display resolution as its CSS viewport size. Apple lists the display as 2556 × 1179 pixels at 460 ppi; Safari’s Responsive Design Mode treats the viewport size in screen points and pixel ratio as separate controls. The display specification alone does not establish an Apple-published CSS viewport width and height. Apple’s iPhone 15 Pro specifications and Responsive Design Mode documentation describe those separate facts.

1. Choose what kind of screenshot you need

Method	Best for	What the image represents
Safari Responsive Design Mode	Fast layout and media-query checks	A browser preview at your selected viewport size and pixel ratio. It approximates device behavior.
iOS Simulator	Checking iOS-specific rendering and behavior	A page rendered in an iOS simulator. It requires Xcode and a suitable simulator runtime.
Physical iPhone with Web Inspector	Checking the real device and Safari state	The page on actual hardware. It requires the iPhone and a Mac connection; use the device’s screenshot method to save the image.

Apple cautions that viewport presets approximate device behavior. Browser chrome, the on-screen keyboard, and device-specific form behavior can affect the real page. Use the Simulator or physical device when those differences matter. Apple Responsive Design Mode documentation

2. Capture a quick viewport preview in Safari

Open the target website in Safari on your Mac.
If Safari’s Develop menu is missing, enable Safari’s developer features in Safari settings. Apple’s developer settings documentation describes the developer feature controls; wording and location can differ by Safari version.
Focus the page and choose Develop → Enter Responsive Design Mode, or press ⌃⌘R.
Enter the viewport width and height in the size controls. Set the pixel ratio separately. Safari reports the effective viewport size in screen points.
Check the layout, scroll position, and orientation you need. Use the rotate control to swap width and height when checking landscape.
Capture the visible preview using the Mac screenshot function and save it in the required format.

Safari’s viewport size control represents screen points; pixel ratio controls rendering density and can affect resolution-dependent styles and image selection such as srcset. Do not multiply the display’s 2556 × 1179 pixel resolution and treat the result as the website viewport. The Apple documentation available here does not publish a specific CSS viewport width and height for iPhone 15 Pro.

Get a useful, repeatable capture

Record the width, height, pixel ratio, orientation, browser version, and capture date alongside the screenshot if it is evidence for a bug.
Keep the browser zoom at its default setting where possible. Responsive Design Mode’s zoom describes how the viewport fits in the Mac window; it is not the viewport size.
Scroll to the same position before comparing screenshots. A viewport capture shows the content currently visible; it is not automatically a full-page image.
Wait for fonts, images, animations, and client-side content to settle. If the page is dynamic, reproduce the same state before each capture.
Capture portrait and landscape separately if both layouts matter.

3. Use Simulator for a closer iOS preview

Open the page in Safari Responsive Design Mode.
Choose Open with Simulator and select an installed iPhone simulator.
Wait for the page to load, then check the behavior that needs iOS rendering, such as form controls, scrolling, or browser-interface effects.
Use the simulator’s screenshot capability to save the image. The exact controls depend on the installed macOS, Xcode, and simulator versions.

Apple recommends Simulator for a more accurate preview than Responsive Design Mode presets. WebKit also describes Simulator as a way to inspect device-specific behavior. Availability and menu wording depend on the installed Safari, Xcode, and simulator versions. Apple documentation · WebKit: Simplified Responsive Design Mode

4. Inspect a physical iPhone

On the iPhone, open Settings → Apps → Safari → Advanced and enable Web Inspector.
Connect the iPhone to your Mac. If prompted, trust the Mac on the phone.
Open the page in Safari on the iPhone.
On the Mac, open Safari’s Develop menu, find the connected iPhone, and select the page to open Web Inspector.
Use the iPhone’s screenshot controls to save the image of the actual device display. Web Inspector is for inspecting the page; the cited Apple instructions do not specify a universal image-export command for this workflow.

Apple also documents connecting over a network after first enabling Web Inspector and connecting by cable. Inspecting iOS and iPadOS

5. Or skip the browser setup

For an image returned directly by an API, call ScreenshotNeo with the target URL and your API key. The response is a screenshot; set the output format in the request as described in the ScreenshotNeo API docs. This example uses the service’s documented endpoint and request pattern.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await (await import('node:fs/promises')).writeFile('shot.webp', bytes);

Replace https://example.com with the page you need and keep the API key private. ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Its MCP server gives AI agents screenshot, page-info, and PDF tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

6. Troubleshooting

Symptom	Likely cause	What to do
The screenshot is much larger or smaller than expected.	The display’s physical pixel resolution was used as the CSS viewport, or the selected pixel ratio differs.	Set viewport dimensions in Responsive Design Mode’s size controls and set pixel ratio separately. Treat the resolution as display pixels, not the viewport.
The Develop menu or Responsive Design Mode is missing.	Safari’s developer features are not enabled, or the page is not focused.	Enable developer features in Safari settings, focus the page, then use the Develop menu or ⌃⌘R.
The preview does not match the iPhone.	Responsive Design Mode is an approximation; browser chrome, keyboard, and device-specific behavior can change the layout.	Open with Simulator or inspect the page on a physical iPhone.
The Simulator option is unavailable.	No appropriate simulator runtime is installed, or the Safari/Xcode version presents the option differently.	Install or open a compatible simulator through Xcode, then check the current Safari menu options.
The iPhone is absent from Safari’s Develop menu.	Web Inspector is disabled, the device has not trusted the Mac, or the connection has not initialized.	Enable Web Inspector in iPhone settings, reconnect, accept the trust prompt, and reopen Safari on both devices.
Text or images look different at the same viewport dimensions.	Pixel ratio changes image selection and resolution-dependent CSS; fonts or assets may also load differently.	Set the intended pixel ratio and wait for assets to load. Verify the result on Simulator or hardware when fidelity is important.
The page looks blank or incomplete in a capture.	It may still be loading, depend on interaction, or have failed scripts or network requests.	Wait for the page to settle, reproduce required interactions, and inspect the console and network activity in Web Inspector.

7. Performance, reliability, and cost

Responsive Design Mode is the quickest option for checking breakpoints and layout because it uses the Safari instance already open on your Mac. Simulator adds setup and uses local machine resources, but gives a closer iOS environment. Physical-device checks require access to an iPhone and a working Mac connection. For repeatable comparisons, keep the URL, page state, viewport dimensions, pixel ratio, scroll position, and timing consistent.

These Safari workflows use tools included with the relevant Apple software and device setup; no screenshot API charge applies. Simulator requires Xcode and simulator software. ScreenshotNeo is a metered service with a free monthly allowance and paid plans; its stated billing policy excludes bot checks, blank pages, failed loads, timeouts, and cache hits. Review the API documentation for request options and response headers before automating production captures.

FAQ

What viewport size should I use for an iPhone 15 Pro screenshot?

Use the iPhone 15 Pro preset in Safari if available, or set the dimensions you need in Responsive Design Mode. Apple’s published 2556 × 1179 figure is display resolution, not an explicit CSS viewport specification.

Does a Safari preset prove that the page renders exactly like an iPhone?

No. Apple says presets approximate device layout, rendering, and behavior. Use Simulator or the actual phone when device-specific details affect the result.

Can I take a full-page screenshot from Responsive Design Mode?

The workflow above captures the visible preview with the Mac screenshot tool. For content below the fold, scroll and capture additional views, or use a capture tool with full-page support.

Can I use the same dimensions for Android?

You can enter any viewport dimensions in Responsive Design Mode, but matching width and pixel ratio does not reproduce another operating system’s browser behavior. Check that platform in its own browser or simulator when that behavior matters.