用 HTML 模拟 A4 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20927182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulate A4 page in HTML
提问by Artem Ushakov
I need to create an HTML page with A4 paper size.
我需要创建一个 A4 纸大小的 HTML 页面。
I know that A4 paper size in pixels is: 595px x 842px(string No. 10-11). But while I put those sizes and try to print the page (I print to PDF file, due to the temporary lack of inks), I do not get my HTML fully fits the page: it is much smaller.
我知道，在像素A4纸张大小是：595px x 842px（串号10-11）。但是，当我放置这些尺寸并尝试打印页面时（由于暂时缺少墨水，我打印为 PDF 文件），我的 HTML 没有完全适合页面：它要小得多。
When I tried to add some pixels (with the coefficient, of course), I got 794px x 1122px(string No. 12-13) and the second printing attempt (saving to PDF file) gave me the result that this variant is a bit bigger, then needed.
当我尝试添加一些像素（当然是系数）时，我得到了794px x 1122px（字符串 No. 12-13）并且第二次打印尝试（保存到 PDF 文件）给了我这个变体有点大的结果，然后需要。
So, what is the solution and why may 595px x 842pxnot be compatible with real A4 saved to PDF?
那么，解决方案是什么，为什么可能595px x 842px与保存为 PDF 的真实 A4 不兼容？
P.S. I use Chromium for Ubuntu 13.10 and did not checked it on Windows.
PS 我在 Ubuntu 13.10 上使用 Chromium，并没有在 Windows 上检查它。
I am doing this to be able to simply change the values via PHP and then convert HTML page to PDF, like described here.
我这样做是为了能够简单地通过 PHP 更改值，然后将 HTML 页面转换为 PDF，如此处所述。
回答by Mr Lister
HTML assumes that the screen is 96 DPI, or that 1 pixel is 1/96 of an inch.
HTML 假定屏幕是 96 DPI，或者 1 像素是 1/96 英寸。
On hardware with a very high resolution, it uses the concept of logical pixels, which are units that are close to 1/96 of an inch, and each of which consists of multiple device pixels. This is true for printers, but also for phones and other devices with high res screens.
在分辨率非常高的硬件上，它使用逻辑像素的概念，逻辑像素是接近 1/96 英寸的单位，每个像素由多个设备像素组成。这适用于打印机，也适用于手机和其他具有高分辨率屏幕的设备。
So, if you want a rectangle the same size an an A4 (21 × 29.7 cm), you should use 794 × 1122 pixels, or in CSS, width:794px; height:1122px. But you can also use physical units, width:21cm; height:29.7cmif you don't want to worry about these logical pixels.
因此，如果您想要一个与 A4（21 × 29.7 厘米）大小相同的矩形，则应使用 794 × 1122 像素，或者在 CSS 中使用width:794px; height:1122px. 但是您也可以使用物理单位，width:21cm; height:29.7cm如果您不想担心这些逻辑像素。
回答by Catalyst
If you're planning on printing this, remember you should print at 300dpi, so 8.5"x11"* 300 = height: 3300px; width: 2550px.
如果你打算打印这个，记住你应该以 300dpi 打印，所以 8.5"x11"* 300 = height: 3300px; 宽度：2550 像素。
Also, I would buffer .25" for a margin as well, so just do 8" x 10.5" before converting to pixels.
另外，我也会缓冲 0.25" 作为边距，所以在转换为像素之前只做 8" x 10.5"。
