The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Call await page.setViewport({ width, height }) before navigating to set a Puppeteer page’s viewport. For example, await page.setViewport({ width: 640, height: 480 }) sets it to 640 by 480 CSS pixels. Await the call because it returns a promise.
Set a page’s viewport dimensions
Create a page, set its viewport, and then navigate. Puppeteer recommends setting the viewport before navigation because some sites do not expect a phone-sized viewport to change after loading.
const page = await browser.newPage();
await page.setViewport({
width: 640,
height: 480,
deviceScaleFactor: 1,
});
await page.goto('https://example.com');width and height are the viewport dimensions; the official example also specifies deviceScaleFactor: 1. This is an example, not an exhaustive list of viewport options. Check the API reference matching your installed Puppeteer version for the current Viewport type and available fields: Page.setViewport().
The viewport belongs to a page, so different pages in the same browser can have different viewport sizes. Puppeteer’s getting-started guide also demonstrates a viewport of 1080 by 1024: Getting started.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
Choose the right Puppeteer method
Use page.setViewport() for viewport dimensions
Call this when you need to configure the page’s viewport and related viewport settings directly. Set it before page.goto() when practical.
Use page.emulate() for a device profile
If you need device metrics and a matching user agent, use page.emulate(device). Puppeteer documents this as a shortcut for setting the user agent and viewport together, and recommends emulating before navigation.
Rank #2
const { KnownDevices } = require('puppeteer');
const iPhone = KnownDevices['iPhone 13'];
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://example.com');Use a device name available in the KnownDevices collection for your installed version. See the Page.emulate() reference.
Use page.resize() for browser-window content sizing
A page viewport and browser-window content dimensions are not interchangeable. In the documented window-management workflow, remove the default viewport, then resize the browser-window content:
Free tools Windows power users keep installed
One-click scans. No signup required.
await page.setViewport(null);
await page.resize({ contentWidth: 600, contentHeight: 400 });The inner window size changes asynchronously in this workflow. The Puppeteer guide demonstrates waiting for a resize event before reading the resulting dimensions. Use Window management for the full sequence.
Set a default for pages with defaultViewport
ConnectOptions.defaultViewport configures a viewport applied to each page through the connection options. It is different from calling page.setViewport(), which changes a particular page. The ConnectOptions reference shows an 800 by 600 example.
Reset a page to its default viewport
Pass null to reset the page’s viewport to its default:
await page.setViewport(null);This is also used in the window-management workflow before calling page.resize(); resetting the viewport and resizing browser-window content are separate operations.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
- Used Book in Good Condition
Handle reloads and timing
- Set the viewport before navigation. Configure the page before
page.goto()where possible, especially when preparing a mobile-sized view. - Await the call.
page.setViewport()returnsPromise<void>, so await it before navigating or continuing with work that depends on the viewport. - Expect a possible reload in specific cases. Changing
isMobileorhasTouchcan cause a reload in some cases. If you see a navigation or reload after changing these settings, check whether you can set them before the initial navigation.
Troubleshooting
The page did not render at the expected size
- Confirm the
setViewport()call was awaited and ran on the page you are capturing. - Set the viewport before navigation, then load the page again.
- Verify that you are changing the page viewport rather than expecting the browser window itself to resize. For window content sizing, use the documented
page.resize()workflow.
The page reloads after changing mobile settings
Some changes to isMobile or hasTouch can cause a reload. Set the desired viewport or device emulation before navigating when you can.
A viewport option or device name is unavailable
Puppeteer APIs and device profiles can vary by installed version. Check the API reference and type definitions corresponding to your project’s version instead of assuming that an example’s fields or defaults cover every version.
Or skip the browser setup
For a screenshot without wiring up Puppeteer, make one API request. Replace YOUR_API_KEY with your key and change the target URL as needed. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie banners before capture and removes known consent banners, newsletter popups, and chat widgets. Bot checks, blank pages, and failed loads are never billed. Its MCP server gives AI agents screenshot tools, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Can two Puppeteer pages use different viewport sizes?
Yes. The viewport is configured per page, so pages in one browser can have different sizes.
Does page.setViewport() return a value?
It returns a promise that resolves to void; await it before continuing.
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.
