Printed map comes out 25% small because 96 and 72 DPI are mixed

• The map occupies about 75% of the A4 page, leaving blank space in the bottom right
• A 1 km scale bar measures 0.75 km on the printed sheet
• `magick identify -verbose map.png` reports a resolution of 72 DPI for the export

1. Compare the exported bitmap's pixel size with A4 at 96 DPI, which is 794x1123
2. Read the image's DPI metadata
3. Measure the map's share of the PDF page and compare it with the 72/96 ratio
4. Check `deviceScaleFactor` and viewport in the puppeteer script
5. Decide the target print DPI before rendering

Render CSS at 96 DPI but capture at the print ratio: `deviceScaleFactor: 300 / 96` gives a 2481x3509 bitmap for A4 at 300 DPI, and declare the DPI on insert (`magick map.png -units PixelsPerInch -density 300`).

# 查看图片 DPI 元数据
magick identify -verbose map.png | Select-String -Pattern "Resolution"

# 794 px 在 72 DPI 下 = 11.03 in，A4 宽 8.27 in -> 缩放到 75%

const A4_W = 8.27, A4_H = 11.69, DPI = 300;

await page.setViewport({
  width: Math.round(A4_W * 96),      // 794，CSS 布局仍按 96
  height: Math.round(A4_H * 96),
  deviceScaleFactor: DPI / 96        // 3.125，位图放大到 2481×3509
});

await page.screenshot({
  path: 'map-a4.png',
  clip: { x: 0, y: 0, width: 794, height: 1123 },
  type: 'png'
});

• Scaling the PNG up inside the PDF layout tool instead of fixing the DPI metadata, which leaves the scale bar wrong
• Changing `deviceScaleFactor` without resizing the viewport, so the CSS layout and the captured region no longer match