Screenshotly lets you set exact viewport dimensions and emulate device characteristics like screen density, touch support, and orientation.
Setting viewport dimensions
Use width and height to define the browser viewport size in pixels:
const screenshot = await client.capture({
url: 'https://example.com',
width: 1440,
height: 900
});
1920x1080 when not specified.
Device emulation parameters
| Parameter | Type | Default | Description |
|---|
width | integer | 1920 | Viewport width in pixels |
height | integer | 1080 | Viewport height in pixels |
deviceScaleFactor | number | 1 | Device pixel ratio (2 for retina) |
isMobile | boolean | false | Emulate mobile device behavior |
hasTouch | boolean | false | Enable touch event support |
isLandscape | boolean | false | Use landscape orientation |
Common device presets
Here are viewport settings for popular devices:
| Device | Width | Height | Scale factor | Mobile |
|---|
| iPhone 14 | 390 | 844 | 3 | true |
| iPhone SE | 375 | 667 | 2 | true |
| iPad Air | 820 | 1180 | 2 | true |
| iPad Mini (landscape) | 1024 | 768 | 2 | true |
| Pixel 7 | 412 | 915 | 2.625 | true |
| MacBook Pro 14” | 1512 | 982 | 2 | false |
| Desktop 1080p | 1920 | 1080 | 1 | false |
Examples
Mobile device
const screenshot = await client.capture({
url: 'https://example.com',
width: 390,
height: 844,
deviceScaleFactor: 3,
isMobile: true,
hasTouch: true
});
Tablet in landscape
const screenshot = await client.capture({
url: 'https://example.com',
width: 1024,
height: 768,
deviceScaleFactor: 2,
isMobile: true,
hasTouch: true,
isLandscape: true
});
Retina desktop
const screenshot = await client.capture({
url: 'https://example.com',
width: 1440,
height: 900,
deviceScaleFactor: 2
});
Combine viewport settings with fullPage: true to capture the entire page at a specific device width. The width controls how the page renders responsively, while full-page captures the complete scrollable height.
Testing responsive breakpoints
To test your site across multiple breakpoints, use batch processing with different viewport settings, or loop through common widths:
const breakpoints = [375, 768, 1024, 1440, 1920];
for (const width of breakpoints) {
const screenshot = await client.capture({
url: 'https://example.com',
width,
height: 800,
fullPage: true
});
console.log(`Captured at ${width}px:`, screenshot.data.imageUrl);
}
