How to Screenshot a Responsive Website at 375 by 667 Resolution
Capture a website at a 375 × 667 mobile viewport with Chrome DevTools or Playwright, and learn how viewport size differs from image pixel dimensions.
To screenshot a responsive website at a 375 × 667 resolution, set the browser viewport to 375 CSS pixels wide and 667 CSS pixels high, then capture the visible viewport. In Chrome, use DevTools Device Toolbar and its Capture screenshot command. For automation, set Playwright’s viewport to { width: 375, height: 667 } before navigating and call page.screenshot() without fullPage.
One detail matters: 375 × 667 usually describes the browser’s CSS-pixel viewport. The saved image can have different physical pixel dimensions if device scale is applied. Check the output file if an exact bitmap size is required.
1. Capture a 375 × 667 viewport in Chrome DevTools
- Open the page in Chrome.
- Open DevTools from the Chrome menu under More tools > Developer tools, or use your usual DevTools shortcut.
- Enable the Device Toolbar.
- In the device dimensions selector, choose Responsive.
- Enter 375 for width and 667 for height.
- Wait for the layout, fonts, and images to settle.
- Open the Device Toolbar’s More options menu and choose Capture screenshot.
Capture screenshot saves the visible viewport. Choose Capture a full size screenshot only if you want the entire scrollable page, including content below the fold. Chrome documents custom responsive dimensions and both capture choices in its Device Mode guide.
For a normal mobile viewport image, use the regular capture command. Full-size capture answers a different question: what does the entire page look like at 375 CSS pixels wide?
2. Automate the capture with Playwright
Set the viewport before navigating. Responsive sites can choose layouts during initial page load, so changing dimensions after navigation may leave the page in a state that does not match a fresh visit at that size.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 375, height: 667 },
});
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'page-375x667.png' });
await browser.close();Save this as screenshot.mjs, install Playwright in your project with npm install playwright, and run it with node screenshot.mjs. The browser default screenshot is the viewport. To capture all scrollable content instead, pass { path: 'page-full.png', fullPage: true }. See the official Playwright Page API for screenshot and viewport options.
Wait for a page that renders after load
The load event does not guarantee that every site-specific animation, client-side request, or lazy image has finished. If the target has a known element that appears when ready, wait for it before the screenshot:
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.locator('main').waitFor({ state: 'visible' });
await page.screenshot({ path: 'page-375x667.png' });Use a selector that reliably indicates the content you need. If the page has no such signal, a short fixed delay can be used, but it makes the capture slower and does not prove that all content is ready.
3. Understand viewport size and image dimensions
A viewport of 375 × 667 is measured in CSS pixels. The exported PNG’s width and height are raster pixels, and can differ when the browser uses a device scale factor. Playwright supports CSS-scale output and device-scale output; device-scale output can be larger than the CSS viewport. Its scale screenshot option controls this behavior.
- For a responsive layout check: set the CSS viewport to 375 × 667. This is usually the important part.
- For a file that must be exactly 375 × 667 pixels: inspect the saved image dimensions. Use CSS-scale output where appropriate, or resize/crop afterward only if doing so preserves the required content.
- For a high-density device-style image: use device-scale output and expect a larger bitmap.
Do not confuse a page viewport capture with an operating-system screenshot of the browser window. A desktop screenshot can include browser controls and surrounding UI; a page screenshot captures the webpage itself.
4. Choose viewport or full-page capture
| Need | Chrome DevTools | Playwright |
|---|---|---|
| Only what fits on a 375 × 667 screen | Capture screenshot | page.screenshot() |
| Entire page at a 375-pixel-wide layout | Capture a full size screenshot | page.screenshot({ fullPage: true }) |
| Exact saved bitmap dimensions | Check the exported file dimensions | Set the appropriate screenshot scale and inspect the output |
A full-page screenshot can be much taller than 667 pixels. It keeps the mobile-width layout but extends the image down the page. If a downstream tool requires a fixed 375 × 667 image, use a viewport screenshot rather than full-page mode.
5. Troubleshoot common problems
| Symptom | Likely cause | Fix |
|---|---|---|
| The layout does not look mobile-sized | The viewport dimensions were not set, or the page was loaded before the automated viewport was configured. | Enter both dimensions in Responsive mode, or create the Playwright page with the 375 × 667 viewport before goto. |
| The image is not 375 × 667 pixels | The configured viewport is in CSS pixels, while output may use device-pixel scaling. | Inspect the bitmap dimensions and choose CSS-scale output or a suitable resize step if exact raster dimensions are mandatory. |
| The screenshot cuts off content | A viewport screenshot captures only what is visible. | Use full-size/full-page capture if the whole scrollable page is intended. |
| The screenshot is blank or partially rendered | The page may still be loading, or required content is rendered asynchronously. | Wait for a meaningful selector or page-specific readiness signal before capture. |
| Lazy images are missing in a full-page capture | Images may load only when scrolled into view. | Scroll through the page to trigger lazy loading, wait for the images, then take the full-page screenshot. |
| Playwright cannot launch a browser | The browser binary may not be installed for the Playwright package. | Install the browser required by your Playwright setup, then rerun the script. |
| Chrome’s screenshot command captures the wrong area | The full-size command was selected instead of the viewport command, or vice versa. | Choose the command that matches whether you need the visible viewport or the complete page. |
6. Performance, repeatability, and cost
For one-off inspection, DevTools avoids writing automation code. For repeated screenshots, Playwright makes the viewport and output path explicit and easy to reuse. Browser startup and page loading are usually the slow parts; avoid unnecessary fixed waits, and wait for a specific readiness condition when possible.
For repeatable captures, keep the browser viewport, device scale, target URL, and readiness condition consistent. Pages can still vary because of dynamic content, network conditions, personalization, or time-sensitive data. If screenshots are used in a visual comparison, capture under the same conditions and account for content that changes between visits.
The manual Chrome and local Playwright workflows do not require a screenshot API subscription. They do require a browser environment and, for automation, a maintained script and browser installation.
7. Or skip the browser setup
ScreenshotNeo captures a website through one API request. Its API accepts the URL and returns an image or PDF; use the documented viewport parameters to request a 375 × 667 capture. The examples below use the service’s documented endpoint and request shape. See the ScreenshotNeo API docs for authentication and supported parameters.
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d width=375 \
-d height=667 \
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={
"access_key": "YOUR_API_KEY",
"url": "https://stripe.com",
"width": 375,
"height": 667,
},
timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as image:
image.write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com',
width: '375',
height: '667',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));With ScreenshotNeo, cookie banners are accepted and removed before the shot, along with known newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot, page-info, and PDF tools. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for free and capture 1,000 screenshots a month with no card.
8. Frequently asked questions
Is 375 × 667 a standard phone screenshot size?
It is a useful CSS viewport size for testing a narrow mobile layout. It does not identify every phone’s physical screen pixels or device scale.
Should I use full-page mode for a mobile screenshot?
Only when you need content below the visible screen. Full-page mode produces a taller image while retaining the narrow page layout.
Can I capture a website at this size without opening DevTools?
Yes. Use Playwright for a local script, or use a screenshot API such as ScreenshotNeo to request the capture remotely.
Why does a page look different at the same dimensions on a real phone?
Viewport dimensions alone do not reproduce every device characteristic. Browser behavior, device scale, fonts, and page-specific conditions can affect the rendered result.
