css - 打印网页的安全像素宽度？

Question

打印网页的安全像素宽度是多少？

我的页面包含大图像，我想确保它们在打印时不会被剪切。

我知道不同的浏览器边距和 US Letter / DIN A4 纸张尺寸。所以我们得到了标准的字母大小和一些默认的 DPI 值。但是我可以将这些转换为像素值以在图像的width属性中指定吗？

score 89 · Accepted Answer

至于真正的“普遍答案”，我无法提供。但是，我可以为某些细节提供一个简单而明确的答案...

670 像素

至少这对于微软产品来说似乎是一个安全的答案。我阅读了很多建议，包括 675，但在我自己测试后，我想出了 670。

除了所有 DPI、边距问题、硬件差异之外，这个答案是基于这样一个事实，即如果我在 IE9 中使用打印预览（具有标准边距） - 并将打印尺寸设置为 100% 而不是默认的“缩小以适应” ，所有内容都适合页面而不会在此宽度下被截断。

如果我向自己发送一封 HTML 电子邮件并使用 Windows Live Mail 2011（Outlook Express 变成了这样）接收它，然后我以 670 宽度打印页面 - 一切都适合。如果我将它发送到实际的硬拷贝或 MS XPS 文件（虚拟打印输出），这也是正确的。

在我进行实验之前，我使用的是 700 的任意宽度。在上面提到的所有场景中，页面的一部分都被截断了。当我减少到 670 时，一切都完美契合。

至于我是如何设置宽度的——我只是使用了一个原始的“包装器”html 表格并将其宽度定义为 670。

如果您可以指定最终用户的软件，那么这些事情就很简单了。如果你不能（当然通常是这种情况），你可以测试他们正在使用的浏览器等细节，并对重要的解决方案进行硬编码。在 IE 和 FF 之间，您将覆盖大约 90% 的网络用户。为“其他所有人”添加一些其他代码，这些代码通常似乎可以工作，就这样吧……

score 47 · Accepted Answer

它不像看起来那么简单。我刚刚遇到了一个类似的问题，这就是我得到的：首先，关于wikipedia的一些背景知识。

接下来，在 CSS 中，对于纸张，它们有pt，即点，或 1/72 英寸。因此，如果您想拥有与显示器上相同尺寸的图像，首先您必须知道显示器的 DPI/PPI（通常为 96，如维基百科文章中所述），然后将其转换为英寸，然后将其转换为点（除以 72）。

但是话又说回来，浏览器在可打印内容方面存在各种问题，例如，如果您尝试使用浮动 css 标签，基于 Gecko 的浏览器会在页面中间剪切您的图像，即使您使用 page-break-inside：避免; 在您的图像上（请参阅此处，在Mozilla 错误跟踪系统中）。

在A List Apart上的这篇文章中，有（很多）关于从浏览器打印的内容。

此外，您必须在打印预览中处理“缩小以适应”宽度，以及各种纸张尺寸和方向。

因此，无论像素大小如何，您都只需找出一个以英寸为单位的好图像尺寸，我的意思是点（7.1" * 72 = 511.2 因此width: 511pt;适用于信纸大小的纸张），或者选择宽度百分比宽度，并根据您的图像宽度关于纸张尺寸。

祝你好运...

score 20 · Accepted Answer

我发现的问题的一种解决方案是以英寸为单位设置宽度。到目前为止，我只测试/确认了它在 Chrome 中的工作。它适用于我使用它的用途（打印出 8.5 x 11 纸）

@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}

score 10 · Accepted Answer

对于打印，我没有设置任何宽度并移除任何阻碍您的打印布局具有动态宽度的障碍。这意味着如果您使浏览器窗口越来越小，则不会剪切/隐藏任何内容，但文档只会变长。像这样，您可以确定其余的将由打印机/pdf-creator 处理。

具有固定宽度的元素（例如图像或表格）呢？

我能想到的选项：

或任何其他 google 结果的组合：CSS、打印、媒体、布局

score 5 · Accepted Answer

确保在 Web 页面中打印时图像不会被剪切的解决方案是具有以下 CSS 规则：

@media print { 
  img { 
    max-width:100% !important;
  } 
}

score 4 · Accepted Answer

打印机不理解像素，它理解点（CSS 中的 pt）。最好的解决方案是编写一个额外的 CSS 用于打印，其所有度量都以点为单位。

然后，在您的 HTML 代码中，在 head 部分中，输入：

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">

score 0 · Accepted Answer

我怀疑有一个...它取决于浏览器，打印机（物理最大dpi）及其驱动程序，您指出的纸张尺寸（我可能也想在B5纸上打印...），设置（横向还是纵向？），而且您经常可以更改比例（百分比）等。
让用户调整他们的设置......

7 回答 7