How to Take a Responsive Website Screenshot at iPhone SE Screen Size

To preview a responsive website at iPhone SE size, set the browser viewport to 375 × 667 CSS pixels for the 2nd- or 3rd-generation iPhone SE, or 320 × 568 CSS pixels for the 1st-generation model. Set device pixel ratio (DPR) to 2 if you want a raster image with the corresponding 2× dimensions: 750 × 1334 or 640 × 1136 pixels. The viewport controls page layout; DPR controls rendering density and output pixels.

The steps below capture the visible browser viewport. Browser emulation is useful for checking breakpoints and content flow, but it does not reproduce every behavior of a physical iPhone.

1. Choose the right iPhone SE dimensions

iPhone SE generation	CSS viewport, portrait	Output at DPR 2
1st generation, 4-inch	320 × 568	640 × 1136 pixels
2nd or 3rd generation, 4.7-inch	375 × 667	750 × 1334 pixels

Apple lists these point and pixel dimensions in its Human Interface Guidelines. In browser tools, enter the point dimensions as CSS pixels. Do not enter 750 × 1334 as the viewport when you mean the newer SE: that would test a much wider CSS layout.

If the request only says “iPhone SE,” clarify the generation when the exact target matters. If you cannot clarify, state which viewport you chose. Landscape testing uses the same dimensions with width and height swapped, but browser chrome and safe areas can affect real-device visible space.

2. Capture with Chrome DevTools

Open the page in Chrome and open DevTools: F12 or Ctrl+Shift+I on Windows/Linux; Cmd+Option+I on macOS.
Enable the Device Toolbar with Ctrl+Shift+M or Cmd+Shift+M, or click its device icon.
Choose Responsive and enter 375 width and 667 height for the 2nd/3rd-generation size, or 320 and 568 for the 1st generation.
Set the device scale factor to 2 if the capture should have 2× pixel density. In the device toolbar’s menu, enable the device pixel ratio setting if it is not displayed.
Reload the page at the chosen size. Wait for the layout and images to settle.
Open the Device Toolbar’s More options menu and choose Capture screenshot. This saves the visible viewport. Use Capture full size screenshot if you need the entire document rather than just the viewport; verify the resulting dimensions because a full-page image is taller than the device screen.

Chrome’s Device Mode documentation explains custom viewport simulation and screenshot capture. Device Mode simulates a mobile experience on desktop; it is not an iOS runtime.

3. Capture with Safari Responsive Design Mode

In Safari settings, enable the developer features if the Develop menu is not visible.
Open the page, then choose Develop > Enter Responsive Design Mode (Control-Command-R).
Set the viewport width and height to 375 × 667 or 320 × 568. Set pixel ratio to 2 when you need the matching high-density output.
Wait for the page to finish rendering, then capture the displayed page using macOS screenshot controls. Crop only if the deliverable requires removal of surrounding browser or simulator chrome.

Apple documents editable dimensions and pixel ratio in Responsive Design Mode. Its presets approximate device sizes. For closer device behavior, Apple recommends checking with Simulator; address bars, keyboards, and device-specific form behavior can change the usable area.

4. Use an iOS Simulator or physical iPhone when fidelity matters

Desktop emulation is appropriate for responsive CSS checks, breakpoint review, and many content-flow issues. If a defect depends on actual iOS rendering, browser behavior, safe areas, keyboard appearance, touch input, or device-specific controls, open the page in iOS Simulator or on the target phone and capture there. Apple also documents how to take a screenshot on an iPhone, including a Full Page capture for an entire Safari webpage: Take a screenshot on iPhone.

Responsive Design Mode and Chrome Device Mode are simulations, not proof that a page behaves identically on hardware. Apple describes Responsive Design Mode as a way to test media queries and dynamic styles, and Chrome likewise cautions that Device Mode simulates mobile conditions. See Apple’s guidance and Chrome’s guidance.

5. Check the viewport and screenshot output

Layout looks desktop-sized or zoomed out: inspect the page’s viewport declaration. A common responsive declaration is <meta name="viewport" content="width=device-width, initial-scale=1">. Apple’s archived viewport guidance explains the role of width=device-width; verify behavior in current browsers too.
Image pixels are twice the CSS dimensions: that is expected at DPR 2. A 375 × 667 CSS viewport can produce a 750 × 1334 raster image.
Screenshot includes browser controls: check whether you captured the webpage viewport, the entire screen, or a simulator window. Change the capture mode or crop if the deliverable calls for page-only output.
Page content is cut off: the standard screenshot captures only the visible viewport. Scroll and capture additional sections, or use full-page capture when available.
Images or fonts are missing: wait for page resources and lazy-loaded content to finish. Scroll through the page first if below-the-fold images load only when they approach the viewport.
Mobile-only issue does not appear: test in Safari or Chrome on a real iPhone or iOS Simulator. Emulation cannot establish behavior that depends on hardware or native browser UI.

6. Automate a repeatable iPhone SE capture

For a one-off screenshot, DevTools is usually quickest. For repeatable capture in a script, set the viewport explicitly in a browser automation tool and use the correct DPR. The following Playwright example is runnable after installing Playwright and its Chromium browser; it saves the visible viewport as a PNG. Change the dimensions for the 1st-generation SE as noted.

npm install playwright
npx playwright install chromium

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({
    viewport: { width: 375, height: 667 },
    deviceScaleFactor: 2
  });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'iphone-se.png' });
  await browser.close();
})();

Replace https://example.com with the target. For the 1st-generation size, use width: 320 and height: 568. Use fullPage: true in page.screenshot only when you want the complete document, not a screen-sized viewport. Pages with analytics, polling, or persistent connections may never reach network idle; in that case wait for a specific selector or use a short explicit delay after navigation.

7. Troubleshooting, performance, and repeatability

Symptom	Likely cause	Fix
Wrong breakpoint or desktop layout	Viewport dimensions were entered as physical pixels, or the page lacks a responsive viewport declaration	Use CSS dimensions (375 × 667 or 320 × 568), inspect the viewport meta tag, and reload.
Output has unexpected pixel dimensions	DPR differs from 1, or the capture includes extra browser area	Check device scale factor and capture mode; inspect the saved image dimensions.
Screenshot is blank or partly rendered	Capture happened before navigation, fonts, or images completed	Wait for a meaningful page selector, then capture. For lazy content, scroll it into view first.
Automation times out waiting for network idle	The page keeps network connections active	Wait for a page-specific selector or use an explicit delay instead of waiting for all network activity to stop.
Layout differs from iPhone	Desktop browser emulation does not reproduce all iOS and hardware behavior	Reproduce on iOS Simulator or the target phone.

For speed, reuse a browser process when capturing many pages, set the viewport before navigation, and wait only for the content your screenshot needs. Network-idle waits can be slow or impossible on active sites. For reliability, use a stable URL and a page-specific readiness condition, and keep the viewport and DPR fixed across runs. A local browser workflow has no per-capture API fee, but it uses your machine’s CPU, memory, browser installation, and maintenance time. Repeated captures also need sensible concurrency so they do not overload the browser or target site.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Use a single request to capture the target at the desired viewport. The API supports custom viewport dimensions and device pixel ratio; consult the ScreenshotNeo API documentation for the current parameter names and response details.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=375 \
  -d height=667 \
  -d device_scale_factor=2 \
  -o iphone-se.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com",
        "width": 375,
        "height": 667,
        "device_scale_factor": 2,
    },
    timeout=90,
)
r.raise_for_status()
open("iphone-se.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '375',
  height: '667',
  device_scale_factor: '2'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('iphone-se.webp', Buffer.from(await res.arrayBuffer()));

For the 1st-generation SE, use width 320 and height 568. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, no card required.

Frequently asked questions

What size is an iPhone SE screenshot?

For the 2nd- or 3rd-generation SE, use a 375 × 667 CSS-pixel portrait viewport; for the 1st generation, use 320 × 568. At DPR 2, the corresponding raster sizes are 750 × 1334 and 640 × 1136.

Does setting the viewport to 375 × 667 guarantee an exact iPhone screenshot?

No. It matches the CSS layout dimensions for the newer SE size, but desktop emulation does not reproduce every iOS, browser chrome, keyboard, or hardware behavior. Use Simulator or a physical phone when those details matter.

Should I capture the full page or just the viewport?

Use a viewport capture to inspect what fits on the screen. Use full-page capture for a tall page or document review; its output will be taller than the device screen and does not represent one visible screen.