javascript - How can I include mobile device details in headers when making a request? - Stack Overflow

admin管理员组

文章数量:1198783

I'm using puppeteer to make a request to a web page and I've tried setting the view port to mobile device's as follows:

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

however, this doesn't get me the mobile site and instead I'm redirected to the desktop viewport site. When using chrome developer tools and I set it to iphone's viewport, I'm able to get the mobile version of the site.

Are there some headers I should be sending along with the age request in puppeteer to ensure I don't get redirected?

I'm using puppeteer to make a request to a web page and I've tried setting the view port to mobile device's as follows:

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

however, this doesn't get me the mobile site and instead I'm redirected to the desktop viewport site. When using chrome developer tools and I set it to iphone's viewport, I'm able to get the mobile version of the site.

Are there some headers I should be sending along with the age request in puppeteer to ensure I don't get redirected?

• javascript
• google-chrome
• google-chrome-devtools
• puppeteer

Share Improve this question Follow asked Jun 16, 2018 at 2:33 CepheusCepheus 4,89366 gold badges3535 silver badges4545 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

You might need to include isMobile: true in your viewport options (page.setViewport()) and set the user agent (page.setUserAgent()) to match a specific mobile device. Puppeteer provides a convenience method to do both automatically with page.emulate().

Example:

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

You can also open, see, edit and define this devices yourself by editing the following file.

/node_modules/puppeteer/lib/DeviceDescriptor.js

you can see all available devices and select one of them or even define a custom one by yourself.

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

Just don't forget to

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

await page.emulate(customDevice);

The API seems changed in v5. Here is how to do it now:

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();

Check official API Doc

You can get all device names here.

You can launch chrome with a custom useragent as follows:

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'],
  });

本文标签： javascriptHow can I include mobile device details in headers when making a requestStack Overflow