Why is the the javascript width different from the media query width in Puppeteer?

The innerWidth reported by javascript doesn't match the width-based media queries being applied when I use Puppeteer to generate PDFs from webpages.

If I call the pdf function like this:

const page = await browser.newPage();

// set viewport size
await page.setViewport({
    width: 1280,
    height: 800,
    deviceScaleFactor: 1,
});

await page.goto(url, {});

// generate PDF from loaded page
const pdfBuffer = await page.pdf({
    printBackground: true,
});

On a page with simple content that displays window.innerWidth and uses CSS media queries for various widths, the innerWidth will display as 1280 as expected, but the media queries will match as if the page is only 612px wide.

I have tried various combinations of changing the width option in the page.pdf function, and adding or omitting await page.emulateMediaType('screen'); and while that does change the matched media queries, they're never the ones I'd expect. It's always for a width that's hundreds of pixels smaller than the desired 1200px size of the viewport.

I first noticed this on a page with @page{ margin:48px } where Puppeteer was matching media queries for widths of 540px.

It looks like the CSS viewport sizes may always be some multiple of 8.5, since it's using the default "Letter" (8.5x11 inch) page size, but I can't figure out the logic that's determining the size in pixels.

Here's an example page that highlights divs on certain screen widths: https://breakpoint-test00.surge.sh/