打印网页的安全宽度(以像素为单位)？

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

它并不像外表那么简单.我只是遇到了一个类似的问题,这就是我得到的:首先,维基百科的一些背景知识.

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

但话说回来,浏览器在打印内容方面存在各种各样的问题,例如,如果你尝试使用float css标签,基于Gecko的浏览器会在页面中间切割你的图像,即使你使用了page-break-inside:避免; 在您的图像上(请参阅此处,在Mozilla错误跟踪系统中).

在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处理.

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

我能想到的选择:

或任何其他谷歌结果的组合:CSS,打印,媒体,布局

Answer 5

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

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

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

Answer 7

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