使用Node JS + Puppeteer时Chromium中URL打开的标签页过小问题

AI 小北

2026-8-9

Puppeteer启动Chromium标签页显示过小的解决方法

这是Puppeteer默认的窗口/视口配置不符合需求导致的，以下是几种直接有效的解决方式：

1. 启动时指定窗口尺寸或最大化

在puppeteer.launch()的参数里添加窗口配置，强制设置窗口大小或直接最大化：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--window-size=1920,1080', // 自定义窗口宽高
      '--start-maximized' // 可选：直接启动最大化窗口，覆盖上面的尺寸设置
    ]
  });
  const page = await browser.newPage();
  await page.goto('目标URL');
})();

2. 设置页面视口

如果只是页面内容渲染过小，可单独为页面设置视口参数，确保内容适配窗口：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  // 设置视口宽高和缩放因子
  await page.setViewport({
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1 // 避免高DPI屏幕下的缩放异常
  });
  
  await page.goto('目标URL');
})();

3. 强制重置设备缩放因子

若系统自带的缩放设置影响了Chromium显示，可添加参数强制重置：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--window-size=1920,1080',
      '--force-device-scale-factor=1' // 强制设备缩放为1:1
    ]
  });
  const page = await browser.newPage();
  await page.goto('目标URL');
})();