set_viewport
Adjust browser viewport dimensions to simulate different screen sizes for responsive design testing and mobile device simulation.
Instructions
Set the browser viewport size (e.g., for mobile simulation)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| width | Yes | Viewport width in pixels | |
| height | Yes | Viewport height in pixels | |
| mobile | No | Whether to simulate a mobile device |
Implementation Reference
- src/browser.ts:38-42 (handler)The `setViewport` method in the `BrowserManager` class implements the core logic for setting the browser viewport size using Puppeteer. It initializes the page if necessary and applies the viewport settings.async setViewport(width: number, height: number, isMobile: boolean = false) { const page = await this.init(); await page.setViewport({ width, height, isMobile }); return `Viewport set to ${width}x${height} (Mobile: ${isMobile})`; }
- src/index.ts:82-94 (schema)The tool schema definition in the TOOLS array, including name, description, and inputSchema for validating parameters: width (number, required), height (number, required), mobile (boolean, optional).{ name: "set_viewport", description: "Set the browser viewport size (e.g., for mobile simulation)", inputSchema: { type: "object", properties: { width: { type: "number", description: "Viewport width in pixels" }, height: { type: "number", description: "Viewport height in pixels" }, mobile: { type: "boolean", description: "Whether to simulate a mobile device" }, }, required: ["width", "height"], }, },
- src/index.ts:135-141 (registration)The switch case in the CallToolRequestSchema handler that registers and dispatches the 'set_viewport' tool call to the browserManager.setViewport method, parsing arguments appropriately.case "set_viewport": result = await browserManager.setViewport( Number(args?.width), Number(args?.height), Boolean(args?.mobile) ); break;