Javascript 如何在 Puppeteer 中设置最大视口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52553311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set max viewport in Puppeteer?
提问by fehif
When I run a new page, I must specify size of the viewport using the setViewportfunction:
当我运行一个新页面时，我必须使用以下setViewport函数指定视口的大小：
await page.setViewport({
width: 1920,
height: 1080
})
I want use max viewport.
我想使用最大视口。
How can I make the viewport resizable according to the window size?
如何根据窗口大小调整视口的大小？
回答by n00b_g33k
I may be very late on this. Nevertheless for others, try:
我可能已经很晚了。不过对于其他人，请尝试：
const browser = await puppeteer.launch({defaultViewport: null});
Set the defaultViewportoption to nullas above to disable the 800x600 resolution. It takes the max resolution then.
将defaultViewport选项设置null为如上以禁用 800x600 分辨率。那么它需要最大分辨率。
回答by Grant Miller
You can pass the --window-sizeflag as an argument to puppeteer.launch()to change the window size to your desired widthand height.
你也可以传递--window-size标志作为一个参数puppeteer.launch()窗口大小更改为需要的width和height。
Then you can call the Chrome Devtools Protocol method Emulation.clearDeviceMetricsOverrideto clear the overridden device metrics (including the default 800 x 600 viewport).
然后您可以调用 Chrome Devtools 协议方法Emulation.clearDeviceMetricsOverride来清除覆盖的设备指标（包括默认的 800 x 600 视口）。
This will cause the viewport to match the window size (when taking screenshots, etc).
这将导致视口与窗口大小匹配（在截屏等时）。
const browser = await puppeteer.launch({
args: [
'--window-size=1920,1080',
],
});
const page = await browser.newPage();
await page._client.send('Emulation.clearDeviceMetricsOverride');
await page.screenshot({
path: 'example.png', // Image Dimensions : 1920 x 1080
});
Note:
page.viewport()will still return{ width: 800, height: 600 }, and the only way to reliably change the values of these properties is to usepage.setViewport().
注意：
page.viewport()仍然会返回{ width: 800, height: 600 }，并且可靠地更改这些属性的值的唯一方法是使用page.setViewport().
See the complete example below:
请参阅下面的完整示例：
'use strict';
const puppeteer = require('puppeteer');
(async () => {
/* ============================================================
Prerequisite: Set Window size
============================================================ */
const browser = await puppeteer.launch({
args : [
'--window-size=1920,1080',
],
});
const page = await browser.newPage();
await page.goto('https://www.example.com/');
/* ============================================================
Case 1: Default Viewport
============================================================ */
console.log('Case 1 - Width :', page.viewport().width); // Width : 800
console.log('Case 1 - Height :', page.viewport().height); // Height : 600
await page.screenshot({
path: 'image-1.png', // Image Dimensions : 800 x 600
});
/* ============================================================
Case 2: Clear Overridden Device Metrics
============================================================ */
await page._client.send('Emulation.clearDeviceMetricsOverride');
console.log('Case 2 - Width :', page.viewport().width); // Width : 800
console.log('Case 2 - Height :', page.viewport().height); // Height : 600
await page.screenshot({
path: 'image-2.png', // Image Dimensions : 1920 x 1080
});
/* ============================================================
Case 3: Manually Set Viewport
============================================================ */
await page.setViewport({
width: 1920,
height: 1080,
});
console.log('Case 3 - Width :', page.viewport().width); // Width : 1920
console.log('Case 3 - Height :', page.viewport().height); // Height : 1080
await page.screenshot({
path: 'image-3.png', // Image Dimensions : 1920 x 1080
});
/* ============================================================
Case 4: Revert Back to Default Viewport
============================================================ */
await page.setViewport({
width: 800,
height: 600,
});
console.log('Case 4 - Width :', page.viewport().width); // Width : 800
console.log('Case 4 - Height :', page.viewport().height); // Height : 600
await page.screenshot({
path: 'image-4.png', // Image Dimensions : 800 x 600
});
await browser.close();
})();
回答by Rahul Singh
const browser = await puppeteer.launch( {"headless": false, args: ['--start-maximized'] } );
const page = await browser.newPage();
await page.setViewport({width:0, height:0});
the " const browser = ..." line maximizes your chrome window. But note that the page is where the viewport needs to be set and it would still be at the default size when you create the page.
“ const browser = ...” 行最大化您的 chrome 窗口。但请注意，页面是需要设置视口的地方，当您创建页面时，它仍将处于默认大小。
When you set the viewport with width and height as "0", the page viewport size becomes equal to size of the browser.
当您将视口的宽度和高度设置为“0”时，页面视口大小将变为等于浏览器的大小。
回答by rivanov
回答by Vangelisz Ketipisz
It's probably worth mentioning that if you combine puppeteer.launch({defaultViewport: null})with puppeteer.connect(), again you need to pass {defaultViewport: null}}, otherwise the viewport is adjusted back to default size. So in this case, use:
可能值得一提的是，如果puppeteer.launch({defaultViewport: null})与结合puppeteer.connect()，则再次需要传递{defaultViewport: null}}，否则视口将调整回默认大小。因此，在这种情况下，请使用：
await puppeteer.connect({browserWSEndpoint: ws, defaultViewport: null})
回答by Zubeir
For me the combination of defaultViewport: nulland args: ['--start-maximized']gave me fullscreen with view fitting to screensize so:
对我来说，defaultViewport: null和的组合args: ['--start-maximized']给了我全屏显示适合屏幕大小的视图，因此：
browser = await puppeteer.launch({
headless: false,
args: [
'--start-maximized',
],
defaultViewport: null,
});
