Question

打印网页的安全宽度（以像素为单位）是多少？

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

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

Answer 1

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

670像素

至少这似乎是微软产品的安全答案。我读了很多建议，包括675，但经过我自己的测试670就是我想出来的。

所有DPI，保证金问题，硬件差异除外，这个答案是基于这样的事实：如果我在IE9中使用打印预览（带标准边距） - 并将打印尺寸设置为100％而不是默认的“缩小”为了适应“，一切都适合页面而不会在这个宽度上被切断。

如果我向自己发送一封HTML电子邮件并通过Windows Live Mail 2011（Outlook Express成为什么）接收它，并且我以670宽度打印该页面 - 那么一切都适合。如果我将其发送到实际的硬拷贝或MS XPS文件（虚拟打印输出），则会成立。

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

至于我如何设置宽度 - 我只使用了一个原始的“包装”html表，并将其宽度定义为670.

如果您可以指定最终用户的软件，那么这些问题可以直截了当。如果你不能（当然通常是这种情况），你可以测试他们正在使用的浏览器等细节，并对重要的解决方案进行硬编码。在IE和FF之间，您将覆盖大约90％的网络用户。为“其他人”提供一些其他代码，这些代码通常似乎有用，并称之为一天......

Answer 2

它不像外表那么简单。我刚遇到一个类似的问题，这就是我得到的：首先，wikipedia上有一点背景。

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

但是再一次，浏览器在打印内容方面存在各种各样的问题，例如，如果你尝试使用float css标签，基于Gecko的浏览器会在页面中间剪切你的图像，即使你使用了分页符 - 里面：避免;在您的图片上（请参阅此处，Mozilla bug tracking system）。

本文在A List Apart上有很多关于从浏览器打印的内容。

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

所以要么你只是想出一个以英寸为单位的好图像尺寸，我的意思是点数，（7.1“* 72 = 511.2所以width: 511pt;适用于字母大小的纸张），无论像素大小如何，或者走宽度百分比宽度，并将图像宽度基于纸张尺寸。

祝你好运......

Answer 3

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

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

Answer 4

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

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

我能想到的选项：

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

Answer 5

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

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

Answer 6

打印机不理解像素，它理解点（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">

Answer 7

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