How to Test a Website Screenshot at 375 Pixel Width in Chrome
Set Chrome DevTools to a 375 CSS pixel viewport, choose the right capture type, and interpret the result with DPR and mobile simulation in mind.
To test a website screenshot at 375 pixels wide in Chrome, open DevTools, turn on the Device Toolbar, select Responsive, and enter 375 for the width. Set the height you want to inspect, then use Capture screenshot for the visible viewport or Capture a full size screenshot for the whole document.
That width is a CSS viewport width. It does not set the screenshot’s physical pixel dimensions by itself: device pixel ratio (DPR), device mode, viewport height, and capture type also affect what you see or save.
Set a 375-pixel viewport in Chrome DevTools
- Open the page in Chrome and open DevTools: Ctrl+Shift+I on Windows or Linux, or Command+Option+I on macOS.
- Turn on the Device Toolbar with the Toggle device toolbar control, or use Ctrl+Shift+M on Windows or Linux and Command+Shift+M on macOS.
- In the device dimensions control, select Responsive.
- Enter 375 in the width field. Enter the height needed for the part of the page you want visible.
- Wait for the page to reflow and for any responsive assets or content to settle. Scroll through the page if you need to inspect areas below the fold.
Chrome’s responsive width presets include 320, 375, 425, 768, 1024, 1440, and 2560 pixels. The 375-pixel preset is a convenient starting point; typing 375 directly makes the intended width explicit. These are viewport presets, not claims about device ownership or visitor statistics. See Chrome’s Device Mode documentation.
Choose mobile or desktop rendering behavior
A width alone does not completely describe a device configuration. Device Mode provides device types that affect whether Chrome renders a mobile or desktop viewport and which interaction events are fired. Choose the mode that matches the behavior you are checking, and record it when sharing a result.
Use responsive mode to inspect how the layout responds at a specific width. If your test depends on mobile rendering or touch-oriented interaction behavior, select an appropriate mobile device type or configure those settings in Device Mode. A 375-pixel responsive viewport is not automatically equivalent to a particular phone.
Device Mode approximates how a page looks and performs on a mobile device. It runs on a desktop or laptop and cannot reproduce every property of real mobile hardware; Chrome’s documentation calls out differences such as CPU architecture. Check on an actual device when the result depends on device-specific behavior or performance.
Find the breakpoint that changes the layout
- Open the Device Toolbar’s More options menu.
- Choose Show media queries.
- Inspect the displayed
max-widthandmin-widthbreakpoints. Select around a breakpoint to see how the page changes; DevTools can reveal the corresponding source declaration. - Compare the layout just below, at, and just above the breakpoint. This helps distinguish a deliberate responsive change from a defect that appears only at one width.
Use the actual breakpoint values in your CSS when testing. The 375-pixel preset is a useful test point, but it does not imply that your site’s layout should switch at 375 pixels.
Capture the viewport or the whole page
| Capture option | What it includes | Use it for |
|---|---|---|
| Capture screenshot | The currently visible viewport | Checking the first screen, a specific section, or a reproducible scroll position |
| Capture a full size screenshot | The full page beyond the visible viewport | Reviewing a long document or capturing content below the fold |
To capture, open the Device Toolbar’s More options menu and choose the appropriate command. In device-specific mode, turn on the device frame first if the frame should appear in the image. Viewport-only and full-page captures produce different artifacts; label which one you used when you share or compare screenshots.
CSS pixels, DPR, and screenshot dimensions
Chrome defines device pixel ratio as the ratio between physical screen pixels and logical CSS pixels. Device Mode uses DPR when drawing for HiDPI displays. As a result, setting the viewport to 375 CSS pixels does not, by itself, specify the output image’s physical pixel width.
For repeatable visual comparisons, record all of the following:
- Viewport width and height in CSS pixels
- Device type or responsive mode
- DPR
- Whether the capture is viewport-only or full-page
- Scroll position for viewport-only captures
- Whether a device frame is included
If two screenshots differ in raster dimensions or sharpness, check DPR and capture mode before treating the difference as a layout change. The CSS layout can have the same 375-pixel viewport while the image is rendered at a different pixel density.
Make the screenshot useful for debugging
- Start with the page state. Load the same route and content in each run. Note any consent banner, modal, or dynamic content that changes the visible layout.
- Set the viewport explicitly. Use Responsive mode and enter 375 rather than relying on a remembered device preset.
- Check relevant breakpoints. Use the media query display to identify nearby CSS changes, then inspect around those widths.
- Choose the artifact deliberately. Capture the viewport for a specific visible state; use full size capture when the entire document matters.
- Keep comparison settings stable. Record height, DPR, device type, capture type, and scroll position along with the image.
- Confirm hardware-specific behavior separately. Use a real phone if the issue depends on actual mobile hardware or performance.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF for a URL. Set the viewport width to 375 with the API options in the documentation; use Chrome when you specifically need to inspect DevTools’ emulated behavior or breakpoint overlays.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const bytes = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));These examples show the basic request; configure the 375-pixel viewport using the documented API parameters. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture, and each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The page is not 375 pixels wide | The toolbar is off, or the width field did not take the value | Enable the Device Toolbar, select Responsive, and re-enter 375 in the width field. |
| The layout looks like desktop at 375 | The viewport width does not by itself select mobile rendering behavior | Check the device type and mobile rendering settings in Device Mode. Use a real device if hardware behavior is the question. |
| The saved image has unexpected dimensions | DPR and capture type affect the raster output | Check DPR and whether you captured the viewport or full page; include both in your comparison notes. |
| Content is missing from the screenshot | You captured only the visible viewport, or the content is below the fold | Scroll to the content for a viewport shot, or choose Capture a full size screenshot for the entire document. |
| A breakpoint change is hard to locate | The relevant media query is between the widths you inspected | Show media queries and compare just below, at, and above the displayed breakpoint. |
| The screenshot does not match a phone | Device Mode is an approximation running on desktop hardware | Verify on the target phone when the result depends on actual hardware, CPU architecture, or device-specific behavior. |
| The menu labels differ | Chrome’s interface can change across versions | Look for the Device Toolbar’s More options menu and consult the current Chrome for Developers Device Mode documentation. |
Performance, repeatability, and cost
For a manual check, DevTools avoids setting up a separate browser automation flow. Keep the page, viewport height, device type, DPR, capture choice, and scroll position consistent so the images remain comparable. A full-page image contains more content than a viewport capture and is useful when that additional content is part of the review.
Device Mode is not a measurement of real-phone performance. Use a physical device to validate behavior that depends on mobile hardware. Chrome DevTools is the documented workflow here; the research for this guide establishes no need for a paid tool or physical product to set a 375-pixel viewport and capture it.
FAQ
Is 375 pixels a phone’s physical screen width?
Not necessarily. In this workflow, 375 is the CSS viewport width. DPR relates CSS pixels to physical pixels and affects rendering density.
Should I use a 375-pixel preset or type the width?
Either works. The preset is convenient; entering 375 explicitly makes the chosen viewport clear in a repeatable procedure.
Does a screenshot at 375 pixels prove the page works on mobile?
It shows how the page behaves in the selected Device Mode configuration. It does not prove behavior or performance on every real phone.
When should I choose a full-page capture?
Choose it when content below the visible viewport belongs in the artifact. For a specific visible state, capture the viewport and note the scroll position.
