How to test a website screenshot at iPad landscape resolution

To test a website screenshot at iPad landscape resolution, choose the iPad model or viewport you need to support, set the browser to that landscape viewport, and capture the visible viewport or full page. For repeatable automated checks, use Playwright and keep the viewport, screenshot scope, and pixel scale consistent between the baseline and later captures.

There is no single universal iPad landscape size. A common test target is 1024 × 768 CSS pixels, but Playwright’s maintained device descriptors also include iPad Pro 11 at 1194 × 834 and iPad (gen 11) at 944 × 656 in landscape. Treat these as profile-specific viewport dimensions, and check the descriptors for the Playwright version your project uses. Playwright device descriptors

1. Choose what “iPad landscape resolution” means

Before capturing, write down the target model or viewport and whether your requested dimensions refer to CSS pixels or physical device pixels. A CSS viewport is the size the page uses for layout and media queries. Device scale affects how many image pixels are produced for each CSS pixel.

Example Playwright profile	Landscape viewport
iPad (gen 5)	1024 × 768 CSS pixels
iPad Pro 11	1194 × 834 CSS pixels
iPad (gen 11)	944 × 656 CSS pixels

These are useful targets, not interchangeable definitions of iPad landscape. If you are testing a responsive breakpoint, set the width and height relevant to that breakpoint. If you need a specific device profile, use its descriptor and confirm the values in your installed Playwright version.

2. Preview the page in Safari

Open the page in Safari on macOS and focus the page.
From the Develop menu, choose Enter Responsive Design Mode (Control-Command-R).
Choose a device preset or enter the viewport width and height yourself. Rotate the preview to landscape if needed.
Inspect the page at the chosen size and use Web Inspector to investigate layout issues.
Capture the view for review. If actual iPad Safari behavior matters, validate with Simulator or a physical iPad.

Responsive Design Mode is useful for media queries and dynamic styles, but it is a preview. Apple says its presets approximate device behavior and recommends opening the page with Simulator for a more accurate preview. Browser chrome, the on-screen keyboard, and device-specific form behavior can affect the experience on hardware. Apple Developer Documentation: Responsive Design Mode

3. Capture an iPad landscape screenshot with Playwright

For a repeatable screenshot assertion, install Playwright Test in your project and save this as a test file such as tests/ipad-landscape.spec.ts. The example sets the viewport dimensions explicitly, navigates to the target page, and compares a viewport screenshot against a stored baseline.

import { test, expect } from '@playwright/test';

test('page at iPad landscape viewport', async ({ page }) => {
  await page.setViewportSize({ width: 1024, height: 768 });
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('page-ipad-landscape.png');
});

Run it with npx playwright test. Replace the example URL and dimensions with your page and chosen target. This checks a browser page at the selected viewport; dimensions alone do not reproduce all physical iPad behavior.

Use a device profile when dimensions are not enough

A profile can include viewport, screen size, user agent, and touch support. Select a descriptor from Playwright’s devices and use it in a test, overriding the viewport only when you intentionally want a different size:

import { test, expect, devices } from '@playwright/test';

test.use({ ...devices['iPad Pro 11'] });

test('iPad Pro 11 landscape page', async ({ page }) => {
  await page.setViewportSize({ width: 1194, height: 834 });
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('ipad-pro-11-landscape.png');
});

Device descriptor names and values are version-sensitive. Check the installed Playwright device list and descriptor source rather than assuming a profile remains unchanged.

Viewport screenshot or full-page screenshot?

The default screenshot assertion captures the visible viewport, which is appropriate for above-the-fold layout and fixed viewport checks. For a long page, use a full-page capture so the entire scrollable document is included:

await expect(page).toHaveScreenshot('ipad-landscape-full-page.png', {
  fullPage: true,
});

Use the same scope for the baseline and every later run. A viewport capture and a full-page capture answer different questions and should not be compared as if they were equivalent.

Control screenshot pixel scale

Playwright screenshot output can use CSS-pixel scale or device-pixel scale. With scale: 'css', the output has one image pixel per CSS pixel. With scale: 'device', output dimensions reflect the device scale factor and can be larger on high-DPI profiles. Make the scale explicit when the image dimensions matter, and use the same scale for the baseline and subsequent captures. Playwright screenshot documentation

await page.screenshot({
  path: 'ipad-landscape.png',
  scale: 'css',
});

For screenshot assertions, keep the assertion options and project configuration consistent. Playwright supports screenshot comparison thresholds; choose a tolerance appropriate to your page and environment rather than treating every pixel difference as a regression. Playwright PageAssertions

4. Make visual comparisons repeatable

Fix the target: record the device profile or exact CSS viewport, orientation, and browser engine.
Fix the capture: decide viewport versus full page and CSS versus device pixel scale.
Stabilize page content: use predictable test data and avoid changing timestamps, rotating content, animations, or random values in the captured state.
Wait for the right condition: navigate to the page and wait for a meaningful selector or state if content loads asynchronously. A fixed delay can help with known timing behavior, but it is less reliable than waiting for the state the test needs.
Review diffs in context: browser versions, fonts, rendering environments, and dynamic content can create visual changes that are not layout regressions.
Validate platform behavior separately: use Simulator or actual hardware for issues tied to iPad Safari, touch input, keyboard behavior, or platform-specific rendering.

Playwright’s screenshot assertions are designed for repeatable checks, but a screenshot at one viewport is not proof of full cross-device compatibility. Playwright Emulation

5. Troubleshoot common problems

Symptom	Likely cause	Fix
The screenshot is the wrong size	The chosen profile has different viewport dimensions, or the file is at device-pixel scale.	Confirm the target descriptor and set the viewport explicitly. Choose CSS or device scale deliberately.
The layout does not match an iPad	Only the viewport dimensions were emulated; other device settings or Safari behavior may differ.	Use an appropriate Playwright device profile for automated checks and Simulator or hardware for platform-specific validation.
The screenshot assertion fails intermittently	Dynamic content, animations, font loading, or asynchronous page updates change the captured pixels.	Stabilize test data and wait for the relevant page state. Set project-specific comparison tolerances only after reviewing the differences.
The capture cuts off content	A viewport screenshot was used for a page whose full length matters.	Use a full-page screenshot and keep that scope consistent in the baseline.
The page appears at portrait dimensions	The selected profile or viewport was not set to landscape values.	Check the width and height and ensure width is greater than height for the intended landscape target.
Safari preview differs from a physical iPad	Responsive Design Mode presets are approximations.	Follow Apple’s guidance and open the page with Simulator for a closer preview, then test on the device when hardware behavior is essential.

6. Performance, reliability, and cost

A local Playwright test avoids a paid screenshot API, but it requires a browser installation and a stable execution environment. Reusing the same browser version, fonts, test data, and viewport settings makes visual comparisons more reliable. Full-page captures can take longer and produce larger files than viewport captures, especially for long pages.

Safari Responsive Design Mode is a quick manual check. Playwright is better suited to repeatable automated checks. Simulator or actual iPad validation is more appropriate when the question depends on real Safari or hardware behavior. These methods answer related but different testing needs.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL and can return a PNG, JPEG, WebP, or PDF. For an iPad landscape viewport, choose the matching width and height using the documented viewport parameters; see the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=1024 \
  -d height=768 \
  -o ipad-landscape.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com",
        "width": 1024,
        "height": 768,
    },
    timeout=90,
)
r.raise_for_status()
open("ipad-landscape.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '1024',
  height: '768',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('ipad-landscape.webp', res);

Set width and height to the target landscape viewport. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; 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, and paid plans start at $5 for 3,000.

FAQ

Is 1024 × 768 the iPad landscape resolution?

It is a familiar landscape viewport target, but not a universal size. Choose the profile you intend to support; Playwright’s descriptors include several landscape viewport sizes.

Should I use CSS pixels or device pixels?

Use CSS pixels when the test concerns responsive layout dimensions. Use device-pixel output when you need an image at the profile’s pixel density. State the choice and keep it consistent.

Does a Playwright screenshot prove the page works on iPad?

No. It checks the selected browser configuration and viewport. Validate with Simulator or a physical iPad for behavior that depends on Safari or hardware.

Should I capture the viewport or the full page?

Capture the viewport for the visible screen at that moment. Capture the full page when the whole scrollable document is what you need to review.