如何在 Google Chrome 中设置模拟设备以使其看起来像 A4 页面？

Question

我有一个使用 Bootstrap 4 的网站。我正在尝试修改 CSS，以便当我将页面打印为 PDF 时，它看起来像我想要的样子。

我找到了

Rendering

选项来启用

Emulate CSS media type

。启用此功能意味着我在浏览器中看到的规则与打印期间应用的规则相同。

我想在Chrome中设置一个

Emulated Device

，使其与各种物理页面（例如A4）具有相同的尺寸。

我使用的是 MacBook Pro 15" 2019，因此它的设备像素比应为 2。

A4纸尺寸为210mm x 297mm。

设备的宽度和高度应该设置为多少？

Answer 1

当我需要使用react生成pdf时遇到类似的问题。 这个设置对我有用。 我很惊讶默认情况下不包含此内容。

Answer 2

浏览器 (CSS) 像素是假设 96 DPI，即一英寸大约有 96 个像素。知道 A4 纸的英寸尺寸和此参数，我们可以计算所需的屏幕尺寸（以像素为单位）。对于 A4 纸，纵向为

794 x 1123

。

此计算器可能会有所帮助：https://www.a4-size.com/a4-size-in-pixels/?size=a4&unit=px&ppi=96