Question

我使用木偶操作员向网页发出请求，我尝试将移植设备设置为移动设备，如下所示：

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

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

我是否应该在木偶操作员中发送一些标题，以确保我不会被重定向？

Answer 1

您可能需要在视口选项（page.setViewport()）中加入isMobile: true，并设置用户代理（page.setUserAgent()）以匹配特定的移动设备。 Puppeteer提供了一种方便的方法，可以使用page.emulate()自动执行。

示例：

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
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();
});

demo

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

您可以使用自定义useragent启动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'],
  });

Answer 4

该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 Doc

您可以获得所有设备名称here。

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

4 个答案: