我有一个使用 Bootstrap 4 的网站。我正在尝试修改 CSS,以便当我将页面打印为 PDF 时,它看起来像我想要的样子。
我找到了
Rendering
选项来启用 Emulate CSS media type
。启用此功能意味着我在浏览器中看到的规则与打印期间应用的规则相同。
我想在Chrome中设置一个
Emulated Device
,使其与各种物理页面(例如A4)具有相同的尺寸。
我使用的是 MacBook Pro 15" 2019,因此它的设备像素比应为 2。
A4纸尺寸为210mm x 297mm。
设备的宽度和高度应该设置为多少?
浏览器 (CSS) 像素是假设 96 DPI,即一英寸大约有 96 个像素。知道 A4 纸的英寸尺寸和此参数,我们可以计算所需的屏幕尺寸(以像素为单位)。对于 A4 纸,纵向为
794 x 1123
。
此计算器可能会有所帮助:https://www.a4-size.com/a4-size-in-pixels/?size=a4&unit=px&ppi=96