Emulating iPhone, Android, and Tablet Screens with the Right Width and Height Presets

Emulating iPhone, Android, and Tablet Screens with the Right Width and Height Presets

author

Snapshot Site Team

08 Apr 2026 - 02 Mins read

A common question when teams start scripting screenshots is: "how do I tell the API to capture an iPhone" or "which device should I emulate?" The honest answer is that there is no dedicated device parameter to set. The API takes two numbers — width and height — and renders exactly that viewport. Everything people call a "device preset" is really just a width/height pair worth remembering and reusing.

That is good news, not a limitation. It means the presets are yours to define once, name however makes sense for your team, and reuse consistently across every script, CI job, or asset pipeline.

A Practical Preset Table

These are the width/height combinations most teams end up hardcoding somewhere in their codebase anyway, so you may as well define them once:

Preset nameWidth × HeightTypical use
Phone (iPhone-class)390 × 844Mobile QA, mobile social previews
Phone (Android-class)412 × 915Mobile QA, Android-specific layouts
Tablet portrait768 × 1024Tablet QA, documentation screenshots
Tablet landscape1024 × 768Tablet QA, landscape app previews
Laptop1366 × 768The most common real-world desktop breakpoint
Desktop1920 × 1080Marketing screenshots, dashboards, decks

Requesting a Preset

The request itself is a plain width/height pair, nothing more exotic:

curl --request POST \
  --url https://api.prod.ss.snapshot-site.com/api/v1/screenshot \
  --header 'Content-Type: application/json' \
  --header 'x-snapshotsiteapi-key: YOUR_API_KEY' \
  --data '{
    "url": "https://example.com/product",
    "format": "png",
    "width": 390,
    "height": 844,
    "fullSize": false
  }'

Store this table as a small constants file or config object in whichever language your automation runs in, and every capture script, doc-screenshot job, or marketing asset script can reference PRESETS.phoneIOS instead of hardcoding raw numbers in a dozen places.

What This Is Not: Resolution or Pixel Density

There is one thing worth being precise about: requesting width: 390, height: 844 reproduces the CSS layout viewport of an iPhone-class screen — the same breakpoint your responsive CSS reacts to. It does not simulate a specific device pixel ratio or retina scaling factor. If you need a higher-resolution output image for print or a marketing deck, the practical approach is to request a proportionally larger width and height directly (for example doubling both dimensions) rather than relying on a device-scale setting, since none exists.

Presets vs. Responsive QA

It is worth separating two different jobs that both start with "capture a phone-sized screenshot":

  • Asset generation — you want one clean screenshot at a known size, for app store listings, docs, or a deck. This post covers that.
  • Responsive regression testing — you want to know whether the mobile and desktop versions of a page drifted apart after a deploy. That is a comparison workflow, not a single capture, and we cover it in Mobile vs Desktop Visual Drift: Testing Responsive Layouts with a Screenshot API.

If asset generation is the goal, the same preset table pairs naturally with app store submissions — see Capturing Perfect App Store and Google Play Screenshots at Scale for the store-specific dimensions.

Once the preset table exists, adding a new device size later is a one-line change, not a scramble through old scripts — and Snapshot Site handles the rendering the same way regardless of which preset you send it.

Related Articles

How to Capture a SvelteKit App in TypeScript

How to Capture a SvelteKit App in TypeScript

A practical guide to capturing SvelteKit application screens from TypeScript, including timing around client-side navigation and full-page reporting captures....

- 02 Mins read

How to Screenshot a Wix Site in Python

How to Screenshot a Wix Site in Python

A practical guide to capturing Wix-built pages from Python, including handling animated sections, cookie banners, and full-page marketing pages....

- 02 Mins read

How to Capture a Spring Boot Admin Dashboard in Java

How to Capture a Spring Boot Admin Dashboard in Java

A practical guide to capturing Spring Boot admin dashboards and internal tools from Java, including timing around async data loading and full-page reporting captures....

- 02 Mins read

How to Screenshot a Ruby on Rails App

How to Screenshot a Ruby on Rails App

A practical guide to capturing Rails application screens, including Turbo/Hotwire updates, ERB-rendered dashboards, and full-page reporting views....

- 02 Mins read

How to Capture a Laravel App in PHP

How to Capture a Laravel App in PHP

A practical guide to capturing Laravel application screens from PHP, including Blade-rendered dashboards, Livewire updates, and full-page reporting views....

- 02 Mins read

Subscribe to Snapshot Site API

Snapshot Site is a powerful API that allows you to capture full-page, high-resolution screenshots of any website with pixel-perfect accuracy.
Simply send a URL to the API to generate a complete snapshot — not just the visible area — covering entire web pages, scrolling content, landing pages, blogs, news articles, social media posts, videos, and more.
Designed for developers, designers, marketers, and journalists,
Snapshot Site makes it easy to integrate web page capture into your applications, workflows, and automation tools.

Subscribe Now
bg wave