ScreenshotNeo

BlogHow-to

How to Take a Tablet Website Screenshot at iPad Air Size

Preview a website at tablet dimensions without buying an iPad, capture it on a real iPad, or automate an iPad Air-sized screenshot with an API.

By the ScreenshotNeo team4 October 20268 min read

You can capture a website at an iPad Air-sized viewport without owning an iPad: use Safari Responsive Design Mode on a Mac to set a custom tablet viewport, then capture the preview. Use Simulator or a physical iPad when you need to check actual iPadOS Safari behavior. For repeatable automated captures, use a screenshot API with a custom viewport.

There is no single dimension that fits every iPad Air generation, orientation, browser chrome state, or screenshot goal. Choose the CSS viewport dimensions you need to test, and treat a desktop preview as a layout check rather than proof of exact device rendering.

1. Choose the right capture method

Method Best for Capture scope iPadOS fidelity
Safari Responsive Design Mode on Mac Quick responsive layout checks at custom dimensions Visible preview Approximation
iOS or iPadOS Simulator Checking Safari behavior and platform-specific rendering Simulator screen or browser capture workflow Closer, still simulated
Physical iPad Actual device rendering, interaction, and a full-page Safari screenshot Visible screen or Full Page capture Actual device
Chrome DevTools Device Mode Quick responsive check in Chrome Viewport screenshot Not an iPadOS Safari test
ScreenshotNeo API Repeatable or scripted screenshots with a custom viewport Image or PDF response Configured viewport; not a native iPadOS Safari test

Apple cautions that Responsive Design Mode presets approximate device behavior and do not reproduce every detail of an actual device. Choose Simulator or real hardware when browser-specific rendering, touch behavior, or iPadOS interaction is the question.

2. Capture an iPad Air-sized preview in Safari on Mac

  1. Open the webpage in Safari on your Mac.
  2. If the Develop menu is missing, enable Safari’s developer features in Safari settings.
  3. Focus the page and choose Develop > Enter Responsive Design Mode. Apple documents Control–Command–R as the shortcut.
  4. Choose a device preset or enter the viewport width and height you want. Use the dimensions for your target layout or test case; do not assume every iPad Air has the same viewport.
  5. Switch between portrait and landscape to inspect both layouts. Set the pixel ratio when it matters to image resources or a high-density rendering check.
  6. Capture the visible preview with the macOS screenshot controls. The output captures what is visible in the preview, not automatically the whole webpage.

Responsive Design Mode is useful for CSS breakpoints, overflow, spacing, and general layout. A simulated viewport does not reproduce every hardware, browser, or operating-system behavior. See Apple’s Responsive Design Mode documentation.

3. Use Simulator for a closer iPadOS check

When available, choose Open with Simulator from Responsive Design Mode, or use the Safari Develop menu’s Simulator options. Simulator availability depends on installed Xcode and simulator runtimes. Inspect the page in simulated iPad Safari and capture the simulator view using the available macOS capture controls.

Simulator helps reveal platform-specific effects such as viewport metadata, rendered type size, and double-tap zoom behavior. It is still a simulator; use an actual iPad if you need to verify the physical device. Apple documents inspecting iOS and iPadOS, and WebKit describes these Safari behaviors in its Safari 17 feature notes.

4. Capture a screenshot on a physical iPad

  1. Open the webpage in Safari on the iPad.
  2. Quickly press and release the top button and either volume button. On an iPad with a Home button, press the top button and Home button together. The exact combination depends on the hardware model.
  3. Tap the screenshot preview that appears.
  4. Choose Full Page to capture beyond the visible screen. Save the result as an image or PDF.

Use a physical device when the screenshot must show the actual Safari rendering or when device interaction is part of the result. See Apple’s iPad screenshot guide.

5. Use Chrome DevTools for a Chrome-based tablet preview

  1. Open the page in Chrome and open DevTools.
  2. Enable Device Mode, select or resize a tablet viewport, and adjust orientation as needed.
  3. Open More options > Capture screenshot to save the viewport.

This is useful for a quick responsive layout capture. Chrome Device Mode does not validate iPadOS Safari behavior. Follow the Chrome DevTools Device Mode guide for its controls.

6. Automate a tablet-sized screenshot with an API

For repeatable captures, set a viewport width and height in a screenshot API request. Match the dimensions to your test case, and use a device scale factor or pixel ratio if the service supports it and you need a higher-density output. An API viewport produces a screenshot at the configured dimensions; it does not make the remote browser equivalent to iPadOS Safari.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=YOUR_VIEWPORT_WIDTH \
  -d height=YOUR_VIEWPORT_HEIGHT \
  -d format=png \
  -o ipad-air-preview.png

Python

import requests

params = {
    "access_key": "YOUR_API_KEY",
    "url": "https://example.com",
    "width": YOUR_VIEWPORT_WIDTH,
    "height": YOUR_VIEWPORT_HEIGHT,
    "format": "png",
}
response = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params=params,
    timeout=90,
)
response.raise_for_status()
with open("ipad-air-preview.png", "wb") as image_file:
    image_file.write(response.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: String(YOUR_VIEWPORT_WIDTH),
  height: String(YOUR_VIEWPORT_HEIGHT),
  format: 'png'
});
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('ipad-air-preview.png', image));

Replace the viewport placeholders with numeric dimensions for your target test. Check the ScreenshotNeo API documentation for the supported parameter names and output options. The request returns an image or PDF; save the response bytes using the matching file extension.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL in one GET request and can capture a configured viewport. Cookie banners are accepted and removed, and known consent platforms, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with response headers identifying the page verdict and billing status. An MCP server lets AI agents use the take_screenshot, get_page_info, and capture_pdf tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=YOUR_VIEWPORT_WIDTH \
  -d height=YOUR_VIEWPORT_HEIGHT \
  -d format=png \
  -o ipad-air-preview.png

Create a free account for 1,000 screenshots a month, with no card required.

Options to consider for a reliable capture

  • Viewport and orientation: Set the CSS viewport dimensions for the layout you are testing. Capture portrait and landscape separately when both matter.
  • Pixel ratio: Affects rendered density and may affect which responsive image candidates load. Use the target device ratio when supported and relevant; compare dimensions and file size as well as appearance.
  • Visible versus full page: Desktop preview and Device Mode captures generally show the viewport. On a physical iPad, Safari’s Full Page option captures beyond it and can save as PDF.
  • Content readiness: Wait for the page and important images to finish loading before capture. Lazy-loaded images may need scrolling or an explicit wait, depending on the tool.
  • Authentication and state: A page behind login, consent state, or a required cookie may render differently from a public fresh visit. Reproduce the needed state in the chosen browser or service.
  • Output format: PNG is a practical choice for crisp UI details. Use PDF when you need a document or a physical iPad Full Page capture.

Troubleshooting

Problem Likely cause Fix
Develop menu or Responsive Design Mode is missing Safari developer features are not enabled Enable developer features in Safari settings, then reopen the Develop menu.
Layout does not match a real iPad Air Preset or desktop simulation approximates device behavior; viewport or pixel ratio may differ Set the intended viewport and ratio. Check in Simulator or physical hardware when exact Safari behavior matters.
Screenshot is cropped to the visible area The selected capture control captures the viewport For an entire Safari page, use Full Page from the screenshot preview on the physical iPad; otherwise use a full-page capture option if your automation tool provides one.
Images or page sections are missing Lazy loading, slow requests, blocked resources, or capture taken before rendering finished Wait for the target content; scroll it into view if necessary, and check the network and page state.
Tablet navigation or breakpoints look wrong Unexpected viewport dimensions, orientation, or browser zoom Verify the CSS viewport dimensions and orientation, reset zoom, and inspect the page’s viewport configuration.
API returns an error or an unexpected file Invalid credentials or parameter values, inaccessible target page, or a response that is not the expected image/PDF Check the status and response headers, verify the API key and documented parameter names, and save the response with the format actually requested.
Simulator is unavailable Xcode or the required simulator runtime is not installed Install the needed Xcode and simulator runtime, or use Responsive Design Mode for a layout-only check.

Performance, reliability, and cost

For one-off layout checks, Safari Responsive Design Mode avoids installing an app or buying hardware and is usually the shortest setup. Simulator and real-device checks add setup time but matter when testing browser-specific rendering or interactions. Automated API captures are useful when the same viewport must be captured repeatedly or in a workflow; account for network time, page readiness, output storage, and your service’s limits and pricing.

For accurate comparisons, keep the URL, viewport, orientation, pixel ratio, page state, and capture timing consistent. A screenshot is a point-in-time rendering: dynamic content, ads, personalized data, and network-dependent components can vary between captures.

FAQ

Do I need to buy an iPad Air?

No. A Mac browser’s responsive mode can preview a tablet-sized layout. Use Simulator or a physical iPad only when you need a closer or actual iPadOS Safari check.

Does an iPad-sized viewport prove my site works on iPad?

No. It checks a chosen layout size. It does not fully test touch interaction, hardware behavior, or all Safari rendering differences.

Can I save the whole page as a PDF?

Yes. On a physical iPad, use Safari’s screenshot preview and choose Full Page, then save as PDF. Automated screenshot APIs may also support PDF output.

Which method should I use for a bug report?

Use the browser and device where the bug occurs. Include the URL, orientation, viewport or device, and whether the screenshot shows the viewport or full page.