发出请求时，如何在标头中包含移动设备详细信息?

Question

我正在使用木偶器向网页发出请求，并且我尝试将视口设置为移动设备的视图端口，如下所示：

await page.setViewport({ width: 350, height: 700});

但是，这不会让我获得移动站点，而是将我重定向到桌面视口站点。当使用chrome开发人员工具并将其设置为iphone的视口时，我能够获得该网站的移动版本。

我是否应该在木偶师中与年龄请求一起发送一些标头，以确保我不会被重定向？

Answer 1

您可能需要在视口选项中包含isMobile: true(page.setViewport()(，并设置用户代理 (page.setUserAgent()( 以匹配特定的移动设备。木偶师提供了一种方便的方法，可以用page.emulate()自动执行这两种操作。

例：

const puppeteer = require('puppeteer');
const devices = puppeteer.devices;
const iPhone = devices['iPhone 6'];
puppeteer.launch().then(async browser => {
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://www.google.com');
// other actions...
await browser.close();
});

演示

Answer 2

您还可以通过编辑以下文件自行打开、查看、编辑和定义此设备。

/node_modules/puppeteer/lib/DeviceDescriptor.js

您可以查看所有可用的设备并选择其中之一，甚至可以自己定义自定义设备。

{
'name': 'CUSTOM NAME',
'userAgent': 'any useragent options you want',
'viewport': {
'width': 1024,
'height': 600,
'deviceScaleFactor': 1,
'isMobile': true,
'hasTouch': true,
'isLandscape': true
}
}

只是不要忘记

const devices = require('puppeteer/DeviceDescriptors'); 
const customDevice = devices['CUSTOM NAME'];
await page.emulate(customDevice);

Answer 3

API 似乎在 v5 中发生了变化。这是现在的操作方法：

const puppeteer = require('puppeteer');
const phone = puppeteer.devices['iPhone X'];
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(phone);
await page.goto('https://www.google.com');
// other actions...
await browser.close();

查看官方 API 文档

您可以在此处获取所有设备名称。

Answer 4

您可以使用自定义用户代理启动 chrome，如下所示：

const browser = await puppeteer.launch({
headless: false,
args: ['--user-agent=Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1'],
});