Capturing Responsive Screenshots Across Devices

In today's multi-device world, ensuring your website looks great across all screen sizes is essential. Our Screenshot API makes it easy to capture and compare how your site renders across different devices and viewport sizes.

Why Test Responsive Design?

54.8% of global web traffic comes from mobile devices
Google uses mobile-first indexing for search rankings
Users expect consistent experiences across all their devices
Design issues often only appear at specific breakpoints

Capturing Device-Specific Screenshots

Our API supports emulating specific devices with their exact dimensions, user agents, and other characteristics:

javascript

01const response = await fetch('https://api.screenshotapi.com/capture', {
02  method: 'POST',
03  headers: {
04    'Content-Type': 'application/json',
05    'Authorization': 'Bearer YOUR_API_KEY'
06  },
07  body: JSON.stringify({
08    url: 'https://your-website.com',
09    device: 'iPhone 13',
10    // This automatically sets the appropriate viewport, user agent, etc.
11  })
12});

Common Device Presets

Our API includes presets for popular devices including:

iPhone (various models)
iPad (various models)
Samsung Galaxy devices
Google Pixel devices
Desktop monitors (various resolutions)

Custom Viewport Dimensions

For testing specific breakpoints or custom screen sizes:

javascript

01const response = await fetch('https://api.screenshotapi.com/capture', {
02  method: 'POST',
03  headers: {
04    'Content-Type': 'application/json',
05    'Authorization': 'Bearer YOUR_API_KEY'
06  },
07  body: JSON.stringify({
08    url: 'https://your-website.com',
09    width: 375,
10    height: 667,
11    deviceScaleFactor: 2,
12    mobile: true
13  })
14});

Comparing Multiple Viewports

To quickly test across multiple devices in one API call:

javascript

01const response = await fetch('https://api.screenshotapi.com/batch', {
02  method: 'POST',
03  headers: {
04    'Content-Type': 'application/json',
05    'Authorization': 'Bearer YOUR_API_KEY'
06  },
07  body: JSON.stringify({
08    requests: [
09      { url: 'https://your-website.com', device: 'iPhone 13' },
10      { url: 'https://your-website.com', device: 'iPad Pro' },
11      { url: 'https://your-website.com', width: 1280, height: 800 },
12      { url: 'https://your-website.com', width: 1920, height: 1080 }
13    ]
14  })
15});

Building a Responsive Testing Dashboard

Here's a simple example of how to create a responsive testing dashboard for your team:

javascript

01// server.js
02const express = require('express');
03const axios = require('axios');
04const app = express();
05
06app.use(express.json());
07app.use(express.static('public'));
08
09app.post('/test-responsive', async (req, res) => {
10  const { url } = req.body;
11  
12  const devices = [
13    { name: 'Mobile', width: 375, height: 667, mobile: true },
14    { name: 'Tablet', width: 768, height: 1024, mobile: true },
15    { name: 'Desktop', width: 1280, height: 800, mobile: false },
16    { name: 'Large Desktop', width: 1920, height: 1080, mobile: false }
17  ];
18  
19  try {
20    const screenshots = await Promise.all(devices.map(async (device) => {
21      const response = await axios.post('https://api.screenshotapi.com/capture', {
22        url,
23        ...device
24      }, {
25        headers: {
26          'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
27        }
28      });
29      
30      return {
31        device: device.name,
32        screenshotUrl: response.data.screenshotUrl
33      };
34    }));
35    
36    res.json({ screenshots });
37  } catch (error) {
38    res.status(500).json({ error: 'Failed to generate screenshots' });
39  }
40});
41
42app.listen(3000, () => console.log('Server running on port 3000'));

By implementing responsive screenshot testing into your development workflow, you can catch design issues early and ensure a consistent experience for all your users, regardless of their device.

Capturing Responsive Screenshots Across Devices

Why Test Responsive Design?

Capturing Device-Specific Screenshots

Common Device Presets

Custom Viewport Dimensions

Comparing Multiple Viewports

Building a Responsive Testing Dashboard

Ready to Get Started?