Free tools Windows power users keep installed
One-click scans. No signup required.
page.setViewport() sets Puppeteer’s page viewport; it does not set or verify every dimension someone might call the “page size.” The value from page.viewport() is the configured setting, not a measurement of the live page. To diagnose a mismatch, compare it with dimensions measured inside the page and identify whether you need a CSS viewport, browser content area, document extent, or screenshot bitmap.
Which “page dimensions” are you comparing?
These measurements describe different surfaces, generally in CSS pixels unless noted otherwise. A mismatch is not necessarily a Puppeteer error.
| Measurement | What it describes |
|---|---|
page.viewport() |
The viewport settings configured in Puppeteer. Puppeteer says this method returns those settings “without checking the actual page viewport.” Puppeteer Page.viewport() API |
window.innerWidth / window.innerHeight |
The live page’s CSS layout viewport, measured from the page context. |
window.outerWidth / window.outerHeight |
The browser window’s outer dimensions. Browser chrome can make these differ from the page content area. |
page.resize() content dimensions |
A target for the browser content area when using Puppeteer’s window-management approach. The API is currently marked experimental. Puppeteer Page.resize() API |
| Document or full-page extent | The page’s content height or width, which may extend beyond the viewport. |
| Screenshot output | The captured image or PDF dimensions, affected by capture options and, for images, potentially device scale factor. |
Mouse coordinates are another distinct case: Puppeteer documents them in main-frame CSS pixels relative to the viewport. If your issue is a click landing in the wrong place, check the coordinate space as well as the dimensions. Puppeteer Page API
Measure the live viewport and browser window
Log the configured value, then evaluate the live page and compare the results. Run this after navigation if you want measurements of the loaded page:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
const configuredViewport = page.viewport();
const measured = await page.evaluate(() => ({
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
outerWidth: window.outerWidth,
outerHeight: window.outerHeight,
}));
console.log({ configuredViewport, measured });Because window-size reporting and resize events can be asynchronous, measure after the page has had time to reflect a resize. Puppeteer’s window-management guide waits for a resize event in its example rather than assuming the values update synchronously. Puppeteer window management guide
Set a responsive page viewport
For a specific CSS viewport, set the viewport before navigation where practical. Puppeteer warns that some sites do not expect phones to change size; changing mobile or touch emulation settings such as isMobile or hasTouch can also cause a page reload. Puppeteer Page.setViewport() API
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({
width: 1280,
height: 800,
deviceScaleFactor: 1,
});
await page.goto('https://example.com');
console.log('Configured:', page.viewport());
console.log('Live:', await page.evaluate(() => ({
width: window.innerWidth,
height: window.innerHeight,
})));
await browser.close();
})();The documented default viewport is 800 × 600 unless overridden through the relevant Puppeteer options. That is a default viewport setting, not a promise about the outer browser window. Puppeteer ConnectOptions
Set the browser content-area dimensions instead
If your target is the browser’s content area rather than a fixed emulated viewport, Puppeteer’s current window-management guide demonstrates clearing the default viewport and resizing the page:
Rank #3
await page.setViewport(null);
await page.resize({ contentWidth: 600, contentHeight: 400 });The guide’s example reports a 600 × 400 content area and a 600 × 487 outer window; the difference illustrates that browser chrome contributes to the outer height. Those figures are the guide’s example, not a guarantee for every environment. The Page.resize() API is labeled experimental, so verify its availability and behavior for the Puppeteer version and environment you use. Window management guide · Page.resize() API
Check headless screen configuration separately
Puppeteer documents the default headless screen as 800 × 600 unless --window-size is specified. The --screen-info option is available only in headless mode. These settings describe screen configuration; they should not be treated as interchangeable with the page viewport. Puppeteer screen configuration guide
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why a screenshot can differ from the viewport
A screenshot’s bitmap dimensions are not automatically the same as the CSS viewport dimensions. Inspect the capture options and the unit you are comparing:
fullPagecaptures beyond the visible viewport to include the page extent.clipselects a specific capture rectangle.captureBeyondViewportaffects capture outside the viewport.deviceScaleFactorsets the relationship between CSS pixels and device pixels for the emulated viewport and can affect image pixel dimensions.
For a viewport-sized screenshot, avoid full-page capture and clipping unless intended, and check the configured device scale factor. Puppeteer documents these as distinct screenshot controls. Puppeteer ScreenshotOptions
Troubleshoot common mismatches
page.viewport()matches your setting, butinnerWidthdoes not: The former reports configuration, not a live measurement. Evaluatewindow.innerWidthandwindow.innerHeightin page context and check whether navigation or emulation settings changed the page.innerHeightdiffers fromouterHeight: These measure the content viewport and outer window, respectively. Browser chrome can account for the difference. If you need a content-area target, follow the window-management method and account for its experimental API status.- The screenshot is taller than the viewport: Check whether
fullPageis enabled or the document extends beyond the viewport. - The screenshot has unexpected dimensions: Check
clip,captureBeyondViewport, anddeviceScaleFactor; do not assume the output bitmap is measured in CSS pixels. - The layout changes after setting the viewport: Set it before
goto()where possible. Review mobile and touch emulation options, which can trigger a reload. - Headless dimensions appear wrong: Separate the headless screen configuration from the page viewport and review
--window-size;--screen-infois headless-only. - Click coordinates appear offset: Confirm the coordinates are expressed in main-frame CSS pixels relative to the viewport, as Puppeteer documents.
Or skip the browser setup
If the task is simply to obtain a page screenshot rather than control Puppeteer’s browser dimensions, ScreenshotNeo offers a one-request screenshot API. Cookie banners are accepted and removed, along with known newsletter popups and chat widgets, before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use screenshot tools.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Free includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
