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

【问题标题】：How can I include mobile device details in headers when making a request?发出请求时如何在标头中包含移动设备详细信息？
【发布时间】：2021-02-10 15:58:11
【问题描述】：

我正在使用 puppeteer 向网页发出请求，我尝试将查看端口设置为移动设备，如下所示：

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

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

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

【问题讨论】：

标签： javascript google-chrome google-chrome-devtools puppeteer

【解决方案1】：

您可能需要在视口选项 (page.setViewport()) 中包含 isMobile: true，并设置用户代理 (page.setUserAgent()) 以匹配特定的移动设备。 Puppeteer 提供了一种方便的方法来自动使用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();
});

demo

【讨论】：

【解决方案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);

【讨论】：

TY。这也是一种有趣的方法。

【解决方案3】：

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

【讨论】：

【解决方案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。

【讨论】：