在打印网页时,安全的像素宽度是多少?
我的页面包含大图像,我想确保它们在打印时不会被裁剪。
我知道不同浏览器边距和标准纸张大小(如美国信纸/ DIN A4),因此我们有标准信纸大小和一些默认DPI值。但是,我能否将这些转换为像素值以在图像的width
属性中指定?
针对一个真正的“普适答案”,我无法提供。然而,我可以为一些具体问题提供简单明了的答案...
670 像素
至少对于微软产品来说,这似乎是一个安全的答案。我看过很多建议,包括 675,但在亲自测试后,我得出的结论是 670。
除了 DPI、边距问题和硬件差异之外,这个答案基于这样一个事实:如果我在 IE9 中使用打印预览(标准边距),并将打印大小设置为 100% 而不是默认的“缩小到适合”,那么在这个宽度下所有内容都可以完整地呈现在页面上,不会被裁剪掉。
如果我向自己发送一封 HTML 邮件,并在 Windows Live Mail 2011 中接收并以 670 的宽度打印页面,同样所有内容都可以完整地呈现。如果将其发送到实际的硬拷贝或 MS XPS 文件(虚拟打印输出),也是如此。
在我进行实验之前,我使用的是一个随意的宽度值 700,在以上所有场景中都有部分页面被裁剪掉了。当我将宽度减小到 670 时,一切都完美地适配了。
至于如何设置宽度 - 我只是使用了一个原始的“包装器”HTML表格,并将其定义为 670 的宽度。
如果您可以控制最终用户的软件,这些问题就可以很直截了当地解决。如果你不能(通常情况下),你可以测试特定的问题,比如他们正在使用哪些浏览器等,然后针对重要的浏览器硬编码解决方案。在 IE 和 FF 之间,您将覆盖约 90% 的网络用户。为“所有其他人”添加一些代码,它们通常似乎有效,并且就此结束吧...
接下来,在CSS中,对于纸张,它们有pt
,即点,或1/72英寸。因此,如果您想要与监视器上相同大小的图像,请先了解您的监视器的DPI / PPI(通常为96,如维基百科文章所述),然后将其转换为英寸,然后转换为点数(除以72)。
但是,浏览器在可打印内容方面存在各种问题,例如,如果您尝试使用float css标记,则基于Gecko的浏览器将在页面中间裁剪您的图像,即使您在图像上使用page-break-inside:avoid;(请参见Mozilla错误跟踪系统)。
有关从浏览器打印的更多信息,请参阅A List Apart上的本文。
此外,您还必须处理“适合缩小”在打印预览中以及各种纸张大小和方向。
因此,您可以仅按英寸(即点)确定良好的图像大小(例如,7.1“* 72 = 511.2,因此width:511pt; 适用于信纸大小),无论像素大小如何,或者按百分比宽度,并根据纸张大小确定图像宽度。
祝你好运...
我发现的解决问题的方法是将宽度设置为英寸。到目前为止,我只在Chrome中测试/确认过这种方法有效。对于我的使用(打印8.5 x 11张纸),这种方法效果很好。
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print
,您可以设置打印页面的大小。您可以设置为 size: letter
或 size: A4
。更多信息请参考 https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/。 - J.Ko在打印时,我不设置任何宽度,并消除使您的打印布局无法具有动态宽度的任何障碍。这意味着,如果您将浏览器窗口缩小,没有内容会被剪切/隐藏,而文档只会变得更长。这样,您可以确信其余的工作将由打印机/pdf创建器处理。
那么像图片或表格这样具有固定宽度的元素怎么办?
我能想到的选项有:
http://www.intensivstation.ch/en/css/print/
或任何其他谷歌结果的组合:CSS,print,media,layout
@media print {
img {
max-width:100% !important;
}
}
打印机不理解像素,它理解的是点(CSS中的pt)。最好的解决方案是为打印编写额外的CSS,其中所有度量单位都使用点。
然后,在您的HTML代码中,头部部分放置:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>
标签添加一个母元素<div>
,这个<div>
的宽度和高度为pt单位。而<img>
则设置宽高属性为width:100%; height:100%;
。 - Hafenkranich我怀疑这是不可能的...它取决于浏览器、打印机(物理最大dpi)及其驱动程序、纸张大小(正如您所指出的,我可能也想在B5纸上打印...)、设置(横向或纵向?),此外您经常可以更改比例尺度(百分比)等。
让用户调整他们的设置...
width:auto
而不是以像素为单位设置宽度,这将自动调整内容的宽度以匹配纸张的宽度。 - Marko Vranjkovic