使用CSS媒体查询检测打印页面大小

Question

使用CSS媒体查询检测打印页面大小

16

我的应用程序通过创建一个不可见的iframe并将其打印来生成打印报告。我正在尝试解决的问题之一是为不同的打印页面大小优化CSS，但这已经是我长长的问题列表中的最新问题了。IE9似乎有点工作（但存在其他问题，比如忽略@page{margin：...}），但在FF或Chrome上完全没有运气。

我的代码看起来像这样：

@media print and (width: 210mm) and (height: 297mm) {
   ... stuff for A4 size ...
}

@media print and (width: 8.5in) and (height: 11in) {
   ... stuff for US letter size ...
}

在 Chrome 或 FF 中，这两个规则都从未匹配过。我还尝试了设备宽度和设备高度，但也不起作用（它们似乎报告的是打印机的绝对最大尺寸，而不是页面大小）。我无法弄清楚“宽度”和“高度”返回的值是什么，有没有一种方法可以告诉？

是否有一种可靠的方法使用媒体查询来检测打印页大小？我很接近得出结论，在任何浏览器中以一致的方式控制打印根本是不可能的，并放弃这个问题。

- neilw

我想知道它是否存在精确宽度/高度的问题。你尝试过将其更改为类似于“最大宽度”或“最小高度”吗？ - redbmk

刚试了一下，不行。考虑：`<html><head> <style type="text/css"> @media (min-width: 8in) { body { font-weight: bold; } } @media (min-width: 10.5in) { body { font-style: italic; } } </style> </head> <body> 这里是一些正文文字 </body> </html>` 在这里，CSS会随着我调整窗口大小而触发，但一旦我去打印，就再也没有触发了（在Chrome中测试）。 - neilw

你尝试过使用页面指令，比如 <style>@page { size: letter }</style> 吗？而不是尝试做断点？Letter 尺寸为 8.5x11 英寸。还有其他选项：A5，A5 横向 A4，A4 横向 A3，A3 横向 letter，letter 横向 legal，legal 横向 - Tom

如何使用百分比作为宽度属性？你是否为每个浏览器进行了针对性的优化，并包含了媒体查询？ - fauverism

可能是CSS设置A4纸张大小的重复问题。 - TVBZ

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codeuix · Accepted Answer

尝试使用此代码，可能可以解决您的问题。

<page size="A4"></page>

Css

@page {
  size: A4;
  margin: 0;
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 12px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 210mm;
  height: 297mm; 
}

@media print {
  body {
    margin: 0;
    box-shadow: 0;
    background: rgb(204,204,204); 
  }
}