How to Capture a Website Screenshot at a Custom Viewport Size on Mac

To capture a website at exact viewport dimensions on a Mac, use Chrome DevTools: open the page, turn on the device toolbar, set the viewport width and height in Responsive mode, then choose Capture screenshot. Choose Capture a full size screenshot if you need the entire page. These are browser viewport dimensions, not the physical dimensions of your Mac’s display.

Capture a custom viewport in Chrome on Mac

Open the website in Chrome.
Open DevTools, then click Toggle device toolbar in the DevTools action bar. The toolbar opens in Responsive mode by default.
In the device toolbar’s Dimensions controls, select Responsive if needed.
Enter the desired width and height, in CSS pixels, in the dimension fields. You can also drag the viewport handles to resize it.
Open the device toolbar’s More options menu. Choose Capture screenshot for the visible viewport, or Capture a full size screenshot for the full page.

Chrome’s documented example uses a 480 by 415 viewport. Use the dimensions your design, test case, or delivery specification calls for; that example is not a required preset. See Chrome DevTools device mode documentation.

Viewport screenshot or full-page screenshot?

Choice	What it captures	Use it when
Capture screenshot	The currently visible browser viewport at the selected dimensions.	You need to check or share what fits in a particular browser window size.
Capture a full size screenshot	The page beyond the visible viewport, as a full-page image.	You need to review the whole page, including content below the fold.

If you need a screenshot of one component rather than the viewport or whole page, use an element-capture workflow. Chrome’s viewport menu choices described above are for viewport and full-page capture.

Understand CSS pixels, output pixels, and DPR

The width and height fields describe the emulated browser viewport in CSS pixels. The resulting image’s pixel dimensions can also depend on device pixel ratio (DPR), which relates logical CSS pixels to physical display pixels. For example, a higher DPR can produce more output pixels for the same CSS viewport.

If a spec says “viewport width” or “CSS pixels,” enter those dimensions in the Responsive controls.
If a spec requires exact image-file pixel dimensions, check the output dimensions after capture and account for the DPR setting.
Do not confuse a 1440 CSS-pixel viewport with a promise that the saved image will be exactly 1440 pixels wide.

Chrome device mode is an emulation aid and a first-order approximation; it does not run the page on a physical phone. Validate on actual hardware when device-specific behavior or exact physical-device fidelity matters. See Chrome’s notes on device mode and DPR.

Use Firefox Responsive Design Mode

Firefox provides a similar browser-based workflow if you prefer it or need to compare rendering across browsers.

Open the page in Firefox.
Toggle Responsive Design Mode with Command-Option-M.
Edit the width and height values above the viewport, or drag its lower-right corner to resize it.
Click the viewport screenshot button to capture the emulated viewport.

Firefox also documents separate full-page screenshot and selected-element capture options in its developer tools. Choose the capture type that matches your target rather than assuming the responsive viewport button captures the whole page. See Firefox Responsive Design Mode documentation and Firefox screenshot documentation.

When macOS Screenshot is the right tool

Use macOS Screenshot when you want a crop of what is currently visible on the desktop, such as a browser window or a manually selected screen region. It does not set the website’s browser viewport to exact dimensions, so it is not a substitute for Responsive mode when the page must render at a specified viewport size.

Shift-Command-5 opens Screenshot controls for capturing a screen, window, or selected portion. It also provides options such as save location, timer, and showing or hiding the pointer.
Shift-Command-4 lets you select a region of the current display.

For Apple’s instructions, see Take a screenshot on your Mac.

Or skip the browser setup

If you need a repeatable capture from code, ScreenshotNeo takes a URL and returns an image or PDF. The example below requests a WebP screenshot; replace the target URL with the page you need. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

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)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting custom viewport captures

Symptom	Likely cause	What to do
The image dimensions differ from the values entered.	The entered values are CSS viewport pixels, while DPR affects output image pixels.	Check the DPR control and inspect the saved image dimensions. Confirm whether your requirement specifies CSS pixels or output pixels.
The screenshot only shows the first screen.	You chose viewport capture, which captures the visible area.	Use Chrome’s Capture a full size screenshot or Firefox’s full-page screenshot workflow.
The page layout does not match a real phone.	Responsive emulation approximates device conditions and cannot reproduce every hardware behavior.	Use emulation for layout checks, then validate on the actual device for device-specific behavior.
The page did not resize to the expected layout.	The responsive mode may not be active, or the dimensions may not have been applied.	Confirm the toolbar is enabled, Dimensions is set to Responsive, and both width and height fields show the intended values.
The capture includes browser controls or desktop content.	You used macOS screen capture, which captures the display or a screen selection rather than rendering a browser viewport.	Use Chrome DevTools or Firefox Responsive Design Mode for a browser-rendered custom viewport.

Performance, reliability, and repeatability

For a one-off visual check: browser developer tools are quick and require no separate capture service.
For repeated captures: record the browser, viewport width and height, DPR, capture type, and page state so later screenshots use the same conditions.
For dynamic pages: wait until the content you care about has loaded before capturing. A screenshot taken during animation, delayed image loading, or a transient consent prompt can differ from a later capture.
For visual comparisons: keep the viewport and DPR consistent. If comparing browsers, capture separately in each browser and account for differences in rendering.
For device fidelity: treat emulation as a useful approximation and check actual hardware when the result depends on real device behavior.

Frequently asked questions

Can I enter any width and height in Chrome Responsive mode?

You can enter the viewport dimensions needed for your capture in the Responsive controls. The important distinction is that these are browser viewport values in CSS pixels.

Does a custom viewport change the size of my Mac display?

No. It changes the emulated browser viewport used to render the page; it does not change the physical display resolution.

Should I use Chrome or Firefox?

Either browser offers a custom responsive viewport workflow. Use the browser relevant to your compatibility check, or capture in both when cross-browser differences matter.

Is a viewport screenshot the same as a full-page screenshot?

No. A viewport capture shows the visible area. A full-page capture includes content outside that area.