Puppeteer - 在無頭 (true | false) 模式下映射真實的移動設備行為

Question

我想用 puppeteer 模擬自定義設備（真實的移動設備尺寸） ，並且我希望在真實的移動設備和 puppeteer 中具有相同的瀏覽器行為。 我試過

const _op = {
             args: [
                 '--no-sandbox', `--window-size=980,1788`
             ],
             headless: false,
             timeout: 60000,
             ignoreHTTPSErrors: true,
             defaultViewport: {
                 height: 1788,
                 width: 980,
                 isMobile: true,
                 hasTouch: true,
                 isLandscape: false,
                 deviceScaleFactor: 3
             }

         }

問題Coordinated (x,y) 在真實移動設備和 puppeteer 中不匹配，就像它繪制 (200,300) 一樣，它顯示了真實移動設備和 puppeteer 鉻瀏覽器中的不同位置。

如果我遺漏了什么，這些是在 puppeteer 中映射真實移動設備尺寸的方法，還是任何建議？

Answer 1

要模擬加載頁面的設備，您可以使用page.emulate(iPhone)來模擬 iphone，如示例所示：

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];

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

也許這可以幫助你： https : //github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteerdevices