Screenshot API · Use case

Take a mobile website screenshot at any device viewport

A mobile website screenshot has to show what a phone actually renders: the mobile layout, the mobile user agent and the phone’s pixel density. The Screenshot API emulates the device before it captures, so responsive website screenshots for QA runs, client reports, app store assets and social previews all come from one request. You can try a capture in the browser first with the mobile screenshot tool.

Start with the Screenshot API

microlink.io captured at a 390 by 844 mobile viewport — Generated live by the API call below: a 390×844 viewport at 2× pixel density.

The problem

Desktop screenshots hide what mobile visitors actually see

A page can look perfect at 1440px and break at 390px: overlapping menus, clipped tables, buttons too small to tap. If your captures only cover desktop, the bugs your visitors hit on their phones never show up in a QA run, a monitoring job or a client report.

Shrinking the browser window does not fix it. Many sites also branch on the user agent, the device pixel ratio and the meta viewport tag, so a narrow desktop window still gets the desktop markup, just squeezed. Running your own headless browser with device descriptors works until the descriptors go stale and the fleet needs patching.

The device parameter loads a complete profile, including the viewport and the user agent, for a named phone, tablet or desktop. When you need exact numbers, viewport overrides individual fields and merges them over the device defaults. Both settings apply to the whole request, so the site serves its mobile variant before the capture happens.

How it works

How to take a mobile screenshot of a website

Start with a device preset, because it sets everything a site can sniff. Drop down to a custom screenshot viewport only when you need a size that no real device has. The browser settings guide covers every rendering option in depth.

1 · Emulate a device preset

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { url, width, height } = await microlink.screenshot(
  'https://example.com',
  { device: 'iPhone 15 Pro' }
)

The browser renders the page with that device’s viewport and user agent, then returns the hosted image URL with its real width and height. Device names are case-insensitive.

2 · Or set the exact viewport

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const { url } = await microlink.screenshot('https://example.com', {
  viewport: {
    width: 390,
    height: 844,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true
  }
})

isMobile makes the browser respect the meta viewport tag and hasTouch enables touch events. Any field you leave out keeps the value of the default device.

3 · Capture a device matrix in one job

import createClient from 'microlink.io'

const microlink = createClient({
  apiKey: process.env.MICROLINK_API_KEY
})

const devices = ['iPhone 15 Pro', 'Pixel 5', 'iPad Pro']

const captures = await Promise.all(
  devices.map(device =>
    microlink.screenshot('https://example.com', { device })
  )
)

Each device is its own request and its own cache entry. There is no throttling, so the three captures run in parallel within your quota.

4 · The same request as a URL

curl 'https://api.microlink.io/?url=https%3A%2F%2Fexample.com&screenshot=true&meta=false&device=iPhone+15+Pro'

Every option is a query parameter, so the request works from any language. Add embed and the URL returns the image itself, ready for an img tag.

Parameters used

device Named preset such as iPhone 15 Pro, Pixel 5, iPad Pro or Macbook Pro 16. Defaults to Macbook Pro 13.
viewport width, height, deviceScaleFactor, isMobile, hasTouch and isLandscape, merged over the device defaults.
screenshot.fullPage Captures the whole scrollable page instead of the first screen. Off by default.
meta Set it to false to skip metadata detection when you only need the image.

Tablets ship with landscape presets such as iPad Pro landscape, and isLandscape puts a custom viewport in landscape mode. When no device is set, the request renders with the default Macbook Pro 13 profile.

Why it works

Why device emulation beats resizing the window

Three details separate a narrow desktop capture from a device emulation screenshot that matches a real phone.

01 · User agent included

The site serves its mobile variant, not a squeezed desktop page.

A device preset changes the user agent along with the viewport. Sites that branch on it, from adaptive layouts to app install banners, return the same markup a phone would receive. The setting applies to the whole request lifecycle, not only to the final capture.

Pair it with a wait for JavaScript-rendered content when the mobile layout hydrates after load.

02 · Pixel density

deviceScaleFactor controls sharpness and file size.

A 3× capture of a 390px viewport is 1170px wide and stays crisp on retina displays. Drop to 1× when the image is a thumbnail or you are generating thousands of them. The response reports the final width and height, so you can lay the image out without measuring it.

The faster, smaller screenshots recipe lists the other settings that cut response time and bytes.

03 · Same options everywhere

Device emulation composes with every other option.

Add fullPage for the whole scroll, colorScheme for the dark theme or waitForSelector for late content, and they all run inside the emulated device. One request describes the full rendering condition, which keeps captures repeatable.

When not to: if you need the page laid out for paper rather than for a screen, the PDF API with a paper format is the better fit.

FAQ

Which devices can I emulate for a mobile screenshot?

Recent iPhones, Pixel and Galaxy phones, iPads and other tablets in portrait and landscape, plus several MacBook and iMac profiles. Names are case-insensitive, and the full list lives on the device parameter page.

How do I take a website screenshot at a custom viewport size?

Pass viewport with any width and height, plus deviceScaleFactor, isMobile, hasTouch or isLandscape. The values you provide merge over the default device profile, so you only declare what changes.

Why does my mobile screenshot still show the desktop layout?

The site is probably reading the user agent or the meta viewport tag, not just the width. Use a device preset so the user agent changes too, or set isMobile to true in a custom viewport so the meta viewport tag is respected.

Does a mobile screenshot capture the full page?

By default it captures the first screen of the emulated viewport. Add screenshot.fullPage to capture the entire scrollable page; expect a slower response on tall pages. The full page screenshot tool shows the difference.

Do mobile screenshots use more requests than desktop ones?

No. A screenshot is one request regardless of the device or viewport. Responses are cached for 24 hours by default, and cache hits do not count against your quota.

Related use cases

Solve the next problem with the same API

Screenshot a single element

Crop the capture to one CSS selector, such as a chart or a pricing table, with a transparent background if you need it.

Capture a single element

Screenshots in dark mode

Set prefers-color-scheme before the capture and get the dark or light theme of any page that supports it.

Capture dark mode

Faster, smaller screenshots

Skip metadata, pick JPEG quality and pixel density, and wait for a selector instead of a timer to cut time and bytes.

Speed up your screenshots

Screenshots with a browser frame

Wrap the capture in a light or dark browser window over a color, gradient or image background.

Add a browser frame

Screenshots of JavaScript-rendered pages

Wait for a selector, a lifecycle event or a delay so single-page apps and lazy sections finish rendering before capture.

Capture JavaScript-rendered pages

Paper size, margins and orientation

Print any URL on A4, Letter or custom paper, with per-side margins, landscape, scale and page ranges.

Set paper size and margins

Ready to capture mobile screenshots?

One request per device, no browsers to run. Start on the free endpoint with 25 requests per day and add an API key when you move to production.

Get your first mobile screenshot