Wayfern
Start building Sign in

Viewport size and mobile rendering

Set the browser viewport per connection or per link, render Web Data pages at a mobile size, and see which window and screen values Wayfern keeps consistent.

Updated

This guide shows how to set the page viewport of a browser session, how to give a link a default size, and what mobile does on Web Data calls.

Set the viewport of a session

Add width and height to the connection URL:

wss://api.wayfern.com/ws?token=$WAYFERN_LINK_TOKEN&width=1920&height=1080
  • The values are the page viewport (innerWidth and innerHeight) in whole CSS pixels.
  • Width is 500 to 3600. Height is 400 to 1900.
  • Send both or neither.
  • Common sizes are 1920 × 1080, 1366 × 768 and 1440 × 900.

An invalid value closes the socket with 4020. If the browser window cannot reach the size, the gateway refuses the session with 4027. It does not run the session at another size.

The size applies to the browser’s own context. In Playwright, open pages with browser.contexts()[0].newPage(). In Puppeteer, connect with defaultViewport: null, or Puppeteer emulates 800 × 600. A context that you create yourself gets its own device and is not sized.

import { chromium } from "playwright";

const browser = await chromium.connectOverCDP(
  `wss://api.wayfern.com/ws?token=${process.env.WAYFERN_LINK_TOKEN}&width=1366&height=768`,
  { timeout: 120_000 },
);
const page = await browser.contexts()[0].newPage();
await page.goto("https://example.com");
console.log(await page.evaluate(() => [innerWidth, innerHeight, outerWidth, screen.width]));
await browser.close();

Save a viewport on the link. Every connection gets it unless its URL sets width and height. Send null to restore the browser’s own size. Link routes take a dashboard session token. You can also set this on the link page.

curl -X PATCH https://api.wayfern.com/api/projects/$PROJECT_ID/links/$LINK_ID \
  -H "Authorization: Bearer $DASHBOARD_JWT" \
  -H "Content-Type: application/json" \
  -d '{ "viewport": { "width": 1366, "height": 768 } }'

What the fingerprint keeps consistent

Wayfern resizes the real browser window. It emulates nothing and runs no script in your pages. Layout, CSS media queries and every window and screen value that a page reads agree with each other:

  • outerWidth and outerHeight are the viewport plus the toolbar and border of the device.
  • When the window fits the device’s screen, screen.* does not change.
  • When it does not fit, the screen becomes the smallest common resolution that holds the window, from 1280 × 720 to 3840 × 2160. The taskbar or dock keeps its size.
  • The window moves onto the screen if it would hang off the edge.

Sessions with different viewports never share a browser. Each new size is a cold start.

Mobile

Browser sessions present a desktop device. Phone sizes such as 390 × 844 are not offered, because a desktop browser window cannot be narrower than 500 pixels. Wayfern has no mobile option for sessions.

On Web Data calls, mobile: true sets the page viewport to 390 × 844. Without it, pages render at 1440 × 900. In the current code, mobile changes only the viewport size. The user agent and the rest of the fingerprint stay those of the desktop browser.

The Screenshot endpoint also takes width and height, from 320 to 3840 each. The default is 1440 × 900, or 390 × 844 with mobile: true.

curl -X POST https://api.wayfern.com/api/v1/screenshot \
  -H "Authorization: Bearer $WAYFERN_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "mobile": true
  }'

mobile is part of the page cache key, so a mobile scrape never reads a desktop capture. Limits are in Viewport and own proxy and the Browser API reference.

Related guides