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

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

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

---

我知道不同的浏览器页边距和美国字母/DIN A4纸张尺寸。所以我们得到了标准的字母大小和一些默认的DPI值。但是我可以将这些转换为像素值以在图像的

宽度
属性中指定吗？
我怀疑是否有一个。。。它取决于浏览器、打印机（物理最大dpi）及其驱动程序、您指出的纸张大小（我可能也希望在B5纸张上打印…）以及设置（横向或纵向？），此外，您还可以经常更改比例（百分比）等。

让用户调整他们的设置…
对于打印，我不会设置任何宽度，也不会移除任何阻碍打印版面具有动态宽度的障碍。这意味着，如果您的浏览器窗口越来越小，则不会剪切/隐藏任何内容，但文档会变得越来越长。这样，您可以确保打印机/pdf创建者将处理其余内容

对于具有固定宽度的元素，如图像或表格，情况如何

图像
我能想到的选择是：


将打印CSS中的图像缩小到您可以假设在任何情况下都适合的宽度，使用pt而不是px（但打印无论如何都需要更多的点/单位，所以这应该不是问题）
不打印

桌子

移除固定宽度
如果确实有包含大量信息的表，请使用横向视图
不要将表格用于布局目的
不打印
提取内容，将其打印为段落


或任何其他谷歌结果的组合：CSS、打印、媒体、布局
打印机不理解像素，它理解点（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">

它不像看上去那么简单。我遇到了一个类似的问题，我得到的是：首先，一点背景知识

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

但是，同样，浏览器在可打印内容方面存在各种各样的问题，例如，如果您尝试使用浮动css标记，基于Gecko的浏览器会在页面中间剪切您的图像，即使您在内部使用分页符：避免；在您的图像上（请参见中的此处）

关于从浏览器打印的更多信息，请参阅本文

此外，您必须在打印预览中处理宽度“收缩以适应”，以及各种纸张大小和方向

因此，要么你只需计算出一个好的图像大小，单位为英寸，我的意思是点，（7.1“*72=511.2 So
width:511pt；
适用于字母大小的纸张）而不考虑像素大小，要么去宽度百分比宽度，并根据纸张大小确定图像宽度

祝你好运…
确保在网页中打印图像时不会被剪切的解决方案是使用以下CSS规则：

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

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

670像素

至少对于微软的产品来说，这似乎是一个安全的答案。我读了很多建议，包括675，但在自己测试后，我想到了670

抛开所有DPI、边距问题、硬件差异不谈，这个答案基于这样一个事实：如果我在IE9中使用打印预览（带有标准边距），并将打印大小设置为100%，而不是默认的“收缩到适合”，则所有内容都适合页面，而不会在该宽度处被剪切

如果我向自己发送一封HTML电子邮件，并使用Windows Live Mail 2011（Outlook Express的前身）接收该电子邮件，然后以670宽度打印页面–同样，所有内容都适合。如果我将其发送到实际的硬拷贝或MS XPS文件（虚拟打印输出），则这一点适用

在我进行实验之前，我使用了700的任意宽度。在上面提到的所有场景中，页面的一部分都被切断了。当我减少到670时，所有内容都非常适合

至于如何设置宽度，我只是使用了一个基本的“包装器”html表，并将其宽度定义为670

如果你能口述最终用户的软件，这些事情就可以直截了当。如果你不能（当然通常是这样）你可以测试他们使用的浏览器等细节，并对重要的解决方案进行硬编码。在IE和FF之间，你将覆盖大约90%的网络用户。为“其他人”输入一些其他代码这似乎很有效，今天就到此为止。
我发现的一个解决问题的方法就是以英寸为单位设置宽度。到目前为止，我只在Chrome上测试/确认了这一点。它对我使用它的目的很有效（打印出8.5 x 11页）

但是对于具有固定宽度的元素（例如图像和表格）呢？但是图像需要以像素为单位指定宽度和高度属性。我需要根据打印机标准DPI和尺寸将PT值转换为像素。然后您必须使用图像容器…或应用试用和错误；）但是，我认为使用两个单独的CSS文件，等等e代表屏幕，另一个代表打印，这是一个很好的做法。给
标签一个包围圈
div以pt表示宽度，img以pt表示宽度，img以
宽度：100%；高度：100%；
而不是以像素表示宽度，你应该使用
宽度：auto
，这将根据纸张的宽度调整内容宽度时间只是创造
@media print {
    .printEl { 
        width: 8.5in;
        height: 11in;
    }
}