How to Capture Screenshots of a Website at Multiple iPad Screen Sizes
Compare a website at multiple iPad viewport sizes with Safari, Simulator, or a physical iPad, and label each capture so the results stay useful.
To capture a website at multiple iPad screen sizes, use Safari on a Mac and open Develop > Enter Responsive Design Mode. Set the viewport width and height for each size, rotate to capture portrait and landscape, and save each screenshot with its dimensions and preview method. This is the fastest way to compare responsive layouts. For a closer iPadOS check, open the page in iPad Simulator; use a physical iPad when actual device behavior matters.
Safari’s device presets are approximations, not exact reproductions of iPad rendering. Apple recommends Simulator for a more accurate preview. [Apple: Responsive Design Mode] [WebKit: Simplified Responsive Design Mode]
1. Choose the capture method
| Method | Use it for | Tradeoff |
|---|---|---|
| Safari Responsive Design Mode | Quick checks at custom widths, heights, orientations, and pixel ratios. | A useful approximation, but not exact iPad rendering. |
| iPad Simulator | Checking a page in an iPadOS environment without a physical device. | Requires Xcode and Simulator setup; capture controls can vary by installed version. |
| Physical iPad | Evidence of actual device and browser behavior. | Requires access to the device. Safari’s full-page capture is different from a viewport screenshot. |
Choose based on the question you need to answer: a responsive layout check, iPadOS rendering, or real-device behavior. If you need an image of only the visible screen, capture the viewport. If you need the whole document, use a full-page capture workflow.
2. Capture custom iPad-sized viewports in Safari
- Open the website in Safari on a Mac.
- If the Develop menu is missing, enable Safari’s web developer features in Safari settings.
- Choose Develop > Enter Responsive Design Mode.
- Enter the width and height you want, or drag the viewport edges. Use the dimensions relevant to the layout you are checking; do not assume a preset represents every iPad model exactly.
- Capture portrait and landscape as separate states. Rotate the viewport or enter the corresponding dimensions.
- Set the pixel ratio when testing resolution-dependent images or styles. Keep track of it along with the viewport dimensions.
- Save each capture with a descriptive filename, such as
pricing-834x1194-portrait-safari-rdm.png.
Responsive Design Mode is intended for checking media queries and dynamic styles. [Apple’s documentation]
Keep comparisons consistent
- Use the same URL, browser state, zoom, and page content for every image.
- Record viewport width and height, orientation, pixel ratio, browser or preview method, and capture date when those details matter.
- Wait for the page to finish loading before each capture. If content changes asynchronously, use the same wait condition or page state each time.
- Keep screenshots at their original scale when comparing spacing and breakpoints; resizing images afterward can obscure differences.
3. Check in iPad Simulator or on a physical device
For a more representative iPadOS rendering context, use the Simulator handoff available from Responsive Design Mode or open the site in an iPad Simulator. The Simulator path is useful when platform behavior matters but a physical device is unavailable. The exact screenshot shortcut or save control depends on the installed Simulator version; check its current menus or controls rather than relying on an unverified keystroke. WebKit describes the handoff and the accuracy tradeoff of desktop preview. [WebKit]
When real device behavior is important, open the page on an iPad and take a device screenshot. Apple also documents capturing a full webpage in Safari, which extends beyond the visible screen. That is a different result from a viewport-only screenshot. [Apple Support: Take a screenshot on iPad]
4. Automate repeatable captures with a screenshot API
For a page that must be captured at several viewport dimensions repeatedly, a screenshot API can take the browser setup out of a local workflow. The examples below capture a page at one chosen viewport per request. Send one request for each size and orientation you need, and record those settings alongside the returned file. An API capture is useful for repeatable website images; it does not claim to reproduce a physical iPad or every iPadOS-specific behavior.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://example.com \
-d width=834 \
-d height=1194 \
-o example-834x1194.pngPython
import requests
params = {
"access_key": "YOUR_API_KEY",
"url": "https://example.com",
"width": 834,
"height": 1194,
}
response = requests.get(
"https://api.screenshotneo.com/v1/shot",
params=params,
timeout=90,
)
response.raise_for_status()
with open("example-834x1194.png", "wb") as image:
image.write(response.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com',
width: '834',
height: '1194',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs =>
fs.writeFile('example-834x1194.png', image)
);Repeat with the dimensions for each size and orientation. Use your own authorized target URL and keep the API key out of source control. See the ScreenshotNeo API documentation for request options and supported parameters. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media.
5. Or skip the browser setup
ScreenshotNeo accepts a URL in one GET request and returns an image or PDF. Set the viewport parameters for the size you want; repeat the call for other dimensions. The following cURL example captures a clean image of a website. See the API documentation for viewport and output options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie and consent banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before the shot; each 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. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
6. Troubleshooting
| Problem | Likely cause | What to do |
|---|---|---|
| Develop menu is missing. | Safari’s developer features are not enabled. | Enable web developer features in Safari settings, then reopen the menu. |
| The preview does not look exactly like an iPad. | Responsive Design Mode is a desktop preview and presets approximate device sizes. | Use Simulator for a closer iPadOS context or a physical iPad for actual behavior. |
| Portrait and landscape images are hard to compare. | The captures do not record dimensions or were taken with different browser states. | Capture each orientation explicitly and include width, height, orientation, and method in filenames or notes. |
| Images or responsive assets differ unexpectedly. | The page may select assets or styles based on pixel ratio as well as viewport dimensions. | Record and check pixel ratio, then keep it consistent when comparing equivalent states. |
| A full-page capture differs from the visible-screen image. | Full-page capture includes content beyond the viewport. | Choose viewport capture for what fits on screen; use Safari’s full-page option when the whole webpage is the goal. |
| An API response is an error instead of an image. | The key, URL, request parameters, or target page load may be invalid or unavailable. | Check the key and encoded URL, inspect the HTTP status and ScreenshotNeo response headers, and consult the API docs for supported parameters and verdicts. |
7. Performance, reliability, and cost
For a one-off layout review, Responsive Design Mode is the quickest path and requires no capture API. Simulator adds setup but can reveal platform-specific differences. A physical iPad is the relevant choice when actual device behavior is the acceptance criterion. For repeated captures, API requests can make dimensions and output filenames consistent; account for page load and any wait conditions when planning a capture run.
Do not treat a successful desktop preview as proof of identical iPad behavior. Keep the method and settings with the image so another developer can reproduce the comparison. ScreenshotNeo offers a free allowance of 1,000 shots per month without a card. Its listed paid plans are 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. Every feature is on every plan. See the documentation for options before building a larger capture workflow.
8. FAQ
Do iPad screen sizes mean CSS viewport dimensions or physical screen pixels?
For responsive layout checks, set the viewport dimensions and record pixel ratio separately when relevant. A screenshot’s pixel dimensions and the CSS viewport are not necessarily the same measure.
Should I capture a full page for responsive testing?
Usually capture the viewport state when checking what appears on screen. Use full-page capture when reviewing the whole document; label it as such because it answers a different question.
Can an automated screenshot replace an iPad test?
It can standardize website captures at chosen dimensions, but use Simulator or a physical device when the question depends on iPadOS or actual hardware behavior.
Which details should accompany a screenshot?
At minimum, note the page, viewport width and height, orientation, and capture method. Include pixel ratio and browser state when they affect the comparison.
