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

Question

我的应用程序通过创建一个不可见的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中，这些规则都没有匹配。我也尝试了设备宽度和设备高度，这些也没有用（它们似乎报告了打印机的绝对最大尺寸，而不是页面尺寸）。我无法弄清楚“宽度”和“高度”返回的值是什么，有没有办法告诉我？

是否有可靠的方法使用媒体查询检测打印页面大小？我非常接近得出的结论是，没有办法在浏览器中以任何一致的方式控制打印，并且放弃了这一点。

Answer 1

试试这个代码可能这可以解决你的问题。

<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); 
  }
}