A layout that looks right on your laptop can break on a 360 px Android phone or an iPad in landscape. Checking every breakpoint by resizing a browser is slow and easy to skip. Render the page at every size you care about in one batch, and look at the results side by side, or feed them to a visual diff.
Device presets
viewport_device emulates a real device: its screen size, pixel ratio, user agent and touch support. Sites that detect mobile by user agent serve their mobile version:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com","viewport_device":"iphone_15_pro","full_page":true,"block_cookie_banners":true}' \
--fail-with-body -o shot.jpgThere are presets for iPhones from the SE to the 17 Pro Max, Pixel and Galaxy phones, iPads, Kindle and more, each with a landscape variant (ipad_pro_landscape). The full list is in the viewport options.
Your own breakpoints
To test the widths in your CSS rather than specific devices, set the viewport yourself and loop over your breakpoints:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com","viewport_width":768,"viewport_height":1024,"viewport_mobile":true,"viewport_has_touch":true,"full_page":true}' \
--fail-with-body -o shot.jpgviewport_mobile makes the page respect its <meta name="viewport"> tag, as phones do. Without it, the page renders as a desktop browser window of that width.
A responsive check in one script
const sizes = ["iphone_se", "pixel_5", "ipad_mini", "ipad_pro_landscape", { viewport_width: 1440 }];
const shots = await Promise.all(sizes.map((s) =>
fetch("https://shotkit.net/api/take", {
method: "POST",
headers: { "X-Access-Key": process.env.SHOTKIT_ACCESS_KEY, "Content-Type": "application/json" },
body: JSON.stringify({ url, full_page: true, response_type: "json", ...(typeof s === "string" ? { viewport_device: s } : s) }),
}).then((r) => r.json()),
));
// shots[i].screenshot_url: one image per size, ready to show in a gridWhat emulation covers
Device emulation runs Chrome with the device's viewport, pixel ratio, user agent and touch events. That covers layout, breakpoints, mobile-only content and image sizes. It doesn't reproduce Safari's WebKit engine, so a rendering bug specific to iOS Safari won't show up; test those on a real device or a WebKit-based service.
Frequently asked questions
Is the iPhone preset real Safari?
No. It's Chrome emulating the iPhone's screen, pixel ratio and user agent. Layout and media queries behave the same; WebKit-specific rendering differences don't show.
Can I capture only what's visible without scrolling?
Yes. Leave out full_page and you get exactly the device's first screen, which is what users see before scrolling.
How do I get landscape?
Use the preset's landscape variant, such as iphone_15_pro_landscape, or set viewport_landscape: true with your own size.