CSS 用于打印网页的安全宽度（以像素为单位）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/320357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safe width in pixels for printing web pages?
提问by aemkei
What is the safe width in pixels to print a web page?
打印网页的安全宽度是多少像素？
My page includes large images and I want to make sure they will not be cut of when printed.
我的页面包含大图像，我想确保它们在打印时不会被剪掉。
I know about different browser margins and US Letter / DIN A4 paper sizes. So we got standard letter sized and some default DPI values. But can I convert these into pixelvalues to specify in the image's widthattribute?
我知道不同的浏览器边距和 US Letter / DIN A4 纸张尺寸。所以我们得到了标准的字母大小和一些默认的 DPI 值。但是我可以将这些转换为像素值以在图像的width属性中指定吗？
回答by Jonathan
As for a true “universal answer”, I can't provide one. I can, however, provide a simple and definitive answer for some particulars...
至于真正的“通用答案”，我无法提供。但是，我可以为某些细节提供简单而明确的答案......
670 PIXELS
670 像素
At least this seems to be a safe answer for Microsoft products. I read many suggestions, including 675, but after testing this myself 670 is what I came up with up.
至少这对于微软产品来说似乎是一个安全的答案。我阅读了很多建议，包括 675，但在我自己测试之后，我想出了 670。
All the DPI, margin issues, hardware differences aside, this answer is based on the fact that if I use print preview in IE9 (with standard margins) – and SET THE PRINT SIZE TO 100% rather than the default of “shrink to fit”, everything fits on the page without getting cut off at this width.
撇开所有 DPI、边距问题、硬件差异不谈，这个答案是基于这样一个事实：如果我在 IE9 中使用打印预览（具有标准边距）——并将打印尺寸设置为 100%，而不是默认的“缩小以适应” ，所有内容都适合页面而不会在此宽度处被切断。
If I send an HTML email to myself and receive it with Windows Live Mail 2011 (what Outlook Express became) and I print the page at 670 width – again everything fits. This holds true if I send it to an actual hard copy or a an MS XPS file (virtual printout).
如果我给自己发送一封 HTML 电子邮件并使用 Windows Live Mail 2011（Outlook Express 变成这样）接收它，然后我以 670 宽度打印页面 - 再次一切都合适。如果我将它发送到实际的硬拷贝或 MS XPS 文件（虚拟打印输出），这也是正确的。
Before I experimented, I was using a arbitrary width of 700. In all the scenarios mentioned above part of the page was getting cut off. When I reduced to 670, everything fit perfectly.
在我进行实验之前，我使用了 700 的任意宽度。在上面提到的所有场景中，页面的一部分都被切断了。当我减少到 670 时，一切都完美契合。
As for how I set the width – I just used a primitive “wrapper” html table and defined it's width to be 670.
至于我如何设置宽度——我只是使用了一个原始的“包装器”html表并将其宽度定义为 670。
If you can dictate the end user's software, such matters can be straight forward. If you cannot (as is usually the case of course) you can test for particulars like which browsers they are using, etc. and hardcode the solutions for the important ones. Between IE and FF, you will cover literally about 90% of web users. Put in some other code for “everyone else” which generally seems to work and call it a day...
如果您可以决定最终用户的软件，那么这些问题就很简单了。如果你不能（当然通常情况下），你可以测试他们使用的浏览器等细节，并对重要的解决方案进行硬编码。在 IE 和 FF 之间，您将覆盖大约 90% 的网络用户。为“其他人”添加一些其他代码，这些代码通常似乎可以工作并收工......
回答by Gyuri
It's not as straightforward as looks. I just run into a similar question, and here is what I got: First, a little background on wikipedia.
它并不像看起来那么简单。我刚刚遇到了一个类似的问题，这是我得到的：首先，维基百科的一些背景知识。
Next, in CSS, for paper, they have pt, which is point, or 1/72 inch. So if you want to have the same size of image as on the monitor, first you have to know the DPI/PPI of your monitor (usually 96, as mentioned on the wikipedia article), then convert it to inches, then convert it to points (divide by 72).
接下来，在 CSS 中，对于纸张，它们有pt，即点或 1/72 英寸。因此，如果您想拥有与显示器上相同大小的图像，首先您必须知道显示器的 DPI/PPI（通常为 96，如维基百科文章中所述），然后将其转换为英寸，然后将其转换为点（除以 72）。
But then again, the browsers have all sorts of problems with printable content, for example, if you try to use float css tags, the Gecko-based browsers will cut your images mid page, even if you use page-break-inside: avoid; on your images (see here, in the Mozilla bug tracking system).
但话又说回来，浏览器在可打印内容方面存在各种问题，例如，如果您尝试使用浮动 css 标签，基于 Gecko 的浏览器会在页面中间剪切您的图像，即使您使用 page-break-inside：避免; 在您的图像上（参见此处，在Mozilla 错误跟踪系统中）。
There is (much) more about printing from a browser in this article on A List Apart.
在A List Apart上的这篇文章中，有更多关于从浏览器打印的内容。
Furthermore, you have to deal width "Shrink to Fit" in the print preview, and the various paper sizes and orientations.
此外，您必须在打印预览中处理宽度“缩小以适应”，以及各种纸张尺寸和方向。
So either you just figure out a good image size in inches, I mean points, (7.1" * 72 = 511.2 so width: 511pt;would work for the letter sized paper) regardless of the pixel sizes, or go width percentage widths, and base your image widths on the paper size.
所以要么你只是想出一个好的图像大小（以英寸为单位），我的意思是点，（7.1" * 72 = 511.2 所以width: 511pt;适用于信纸大小的纸张），无论像素大小如何，或者去宽度百分比宽度，并根据你的图像宽度在纸张尺寸上。
Good luck...
祝你好运...
回答by jHouse
One solution to the problem that I found was to just set the width in inches. So far I've only tested/confirmed this working in Chrome. It worked well for what I was using it for (to print out an 8.5 x 11 sheet)
我发现的问题的一种解决方案是以英寸为单位设置宽度。到目前为止，我只在 Chrome 中测试/确认了这一点。它适用于我使用它的目的（打印 8.5 x 11 张）
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
回答by markus
For printing I don't set any width and remove any obstacles which keep your print layout from having a dynamic width. Meaning if you make your browser window smaller and smaller, no content is cut/hidden but the document just gets longer. Like this, you can be sure that the rest will be handled by the printer/pdf-creator.
对于打印，我不会设置任何宽度并移除任何阻碍您的打印布局具有动态宽度的障碍。这意味着如果您使浏览器窗口越来越小，则不会剪切/隐藏任何内容，但文档只会变长。像这样，您可以确定其余的将由打印机/pdf-creator 处理。
What about elements with a fixed width such as images or tables?
图像或表格等具有固定宽度的元素呢？
Images
图片
Options I can think of:
我能想到的选项：
- scale images down in your print CSS to a width which you can assume will fit in any case, use pt not px (but print will need more points/unit anyways, so this should hardly be a problem)
- exclude from being printed
- 将打印 CSS 中的图像缩小到您可以假设在任何情况下都适合的宽度，使用 pt 而不是 px（但无论如何打印都需要更多的点/单位，所以这应该不是问题）
- 排除打印
Tables
表
- remove the fixed width
- use landscape if you really have tables with loads of information
- don't use tables for layout purposes
- exclude from being printed
- extract content, print it as paragraphs
- 删除固定宽度
- 如果您真的有包含大量信息的表格，请使用横向
- 不要将表格用于布局目的
- 排除打印
- 提取内容，将其打印为段落
http://www.intensivstation.ch/en/css/print/
http://www.intensivstation.ch/en/css/print/
or any other google result for combinations of: CSS, print, media, layout
或任何其他谷歌搜索结果的组合：CSS、打印、媒体、布局
回答by dontcallmedom
A solution to ensure that images don't get cut when printed in a Web page is to have the following CSS rule:
确保图像在网页中打印时不会被剪切的解决方案是具有以下 CSS 规则：
@media print {
img {
max-width:100% !important;
}
}
回答by ARemesal
A printer doesn't understand pixels, it understand dots (pt in CSS). The best solution is to write an extra CSS for printing, with all of its measures in dots.
打印机不理解像素，它理解点（CSS 中的 pt）。最好的解决方案是为打印编写一个额外的 CSS，其所有度量都以点为单位。
Then, in your HTML code, in head section, put:
然后，在您的 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">
回答by PhiLho
I doubt there is one... It depends on browser, on printer (physical max dpi) and its driver, on paper size as you point out (and I might want to print on B5 paper too...), on settings (landscape or portrait?), plus you often can change the scale (percentage), etc.
Let the users tweak their settings...
我怀疑有没有...这取决于浏览器、打印机（物理最大 dpi）及其驱动程序、您指出的纸张尺寸（我可能也想在 B5 纸上打印...）、设置（横向或纵向？），此外您经常可以更改比例（百分比）等。
让用户调整他们的设置......
