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

Question

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

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

我知道不同浏览器边距和标准纸张大小（如美国信纸/ DIN A4），因此我们有标准信纸大小和一些默认DPI值。但是，我能否将这些转换为像素值以在图像的width属性中指定？

- aemkei

---

应该使用width:auto而不是以像素为单位设置宽度，这将自动调整内容的宽度以匹配纸张的宽度。 - Marko Vranjkovic

Answer 1

针对一个真正的“普适答案”，我无法提供。然而，我可以为一些具体问题提供简单明了的答案...

670 像素

至少对于微软产品来说，这似乎是一个安全的答案。我看过很多建议，包括 675，但在亲自测试后，我得出的结论是 670。

除了 DPI、边距问题和硬件差异之外，这个答案基于这样一个事实：如果我在 IE9 中使用打印预览（标准边距），并将打印大小设置为 100% 而不是默认的“缩小到适合”，那么在这个宽度下所有内容都可以完整地呈现在页面上，不会被裁剪掉。

如果我向自己发送一封 HTML 邮件，并在 Windows Live Mail 2011 中接收并以 670 的宽度打印页面，同样所有内容都可以完整地呈现。如果将其发送到实际的硬拷贝或 MS XPS 文件（虚拟打印输出），也是如此。

在我进行实验之前，我使用的是一个随意的宽度值 700，在以上所有场景中都有部分页面被裁剪掉了。当我将宽度减小到 670 时，一切都完美地适配了。

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

如果您可以控制最终用户的软件，这些问题就可以很直截了当地解决。如果你不能（通常情况下），你可以测试特定的问题，比如他们正在使用哪些浏览器等，然后针对重要的浏览器硬编码解决方案。在 IE 和 FF 之间，您将覆盖约 90% 的网络用户。为“所有其他人”添加一些代码，它们通常似乎有效，并且就此结束吧...

- Jonathan

---

我想补充一下，虽然在回答这个问题的时候，FF和IE可能占据了90%的浏览器市场份额（但我认为这很不可能，因为谷歌向使用任何其他浏览器进行搜索的人提供Chrome，而且我认为它是目前更好、更轻量级的浏览器），但随着趋势的变化，浏览器市场份额经常像其他市场份额一样发生变化。 - CodingInTheUK

这回答了这个问题，虽然它显然比简单的px大小要复杂。 - rune711

Answer 2

这并不像看起来那样简单。我刚碰到一个类似的问题，以下是我的解决方法：首先，简要介绍一下维基百科的背景。

接下来，在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; 适用于信纸大小），无论像素大小如何，或者按百分比宽度，并根据纸张大小确定图像宽度。

祝你好运...

- Gyuri

---

其实，我只需创建一个 PHP Image GD 版本的材料（明信片、传单等），然后从数据库中提取信息即可自动重新格式化。我只需保持像素比正确即可。例如 4x6 英寸的明信片（350dpi）== 2135x1435 像素。 - Michael J. Calkins

Answer 3

我发现的解决问题的方法是将宽度设置为英寸。到目前为止，我只在Chrome中测试/确认过这种方法有效。对于我的使用（打印8.5 x 11张纸），这种方法效果很好。

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

- jHouse

---

你没有考虑页面边距，也没有考虑A4纸张的可能性。 - Blazemonger

这对我来说非常完美，很有道理。 - leedotpang

通过使用 @media print，您可以设置打印页面的大小。您可以设置为 size: letter 或 size: A4。更多信息请参考 https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/。 - J.Ko

@J.Ko 这不是重点；最终用户可能会使用A4或信纸，CSS设计师无法确定用户可用哪种纸张。 - Blazemonger

Answer 4

在打印时，我不设置任何宽度，并消除使您的打印布局无法具有动态宽度的任何障碍。这意味着，如果您将浏览器窗口缩小，没有内容会被剪切/隐藏，而文档只会变得更长。这样，您可以确信其余的工作将由打印机/pdf创建器处理。

那么像图片或表格这样具有固定宽度的元素怎么办？

图片

我能想到的选项有：

• 在您的打印CSS中将图像缩小到您可以假定在任何情况下都适合的宽度，使用pt而不是px（但打印无论如何都需要更多的点/单位，因此这几乎不会成为问题）
• 不要打印图片

表格

• 去除固定宽度
• 如果您真的有包含大量信息的表格，请使用横向排列
• 不要将表格用于布局目的
• 不要打印表格
• 提取内容，将其打印为段落

http://www.intensivstation.ch/en/css/print/

或任何其他谷歌结果的组合：CSS，print，media，layout

- tharkun

---

但是对于具有固定宽度的元素，例如图像和表格呢？ - aemkei

答案上的链接显示404错误。 - Blunderchips

Answer 5

一种确保网页上的图片在打印时不被裁切的解决方案是使用以下CSS规则：

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

- dontcallmedom

Answer 6

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

- ARemesal

---

但是图像需要指定以像素为单位的宽度和高度属性。我需要根据打印机标准DPI和尺寸将PT值转换为像素。 - aemkei

然后你必须处理图像容器...或者试错；）不过，我认为使用两个分离的CSS文件，一个用于屏幕，另一个用于打印，是一个好的做法。 - ARemesal

给<img>标签添加一个母元素<div>，这个<div>的宽度和高度为pt单位。而<img>则设置宽高属性为width:100%; height:100%;。 - Hafenkranich

Answer 7

我怀疑这是不可能的...它取决于浏览器、打印机（物理最大dpi）及其驱动程序、纸张大小（正如您所指出的，我可能也想在B5纸上打印...）、设置（横向或纵向？），此外您经常可以更改比例尺度（百分比）等。
让用户调整他们的设置...

- PhiLho