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

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

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

解决方法

你似乎做了很多工作,你不需要做很多工作……尝试打印页面的某些区域……

将这些类添加到样式表中……

<style media="screen"> 
  .noprint{ display: block; }
  .yesPrint{ display: block !important; }
</style>

<style media="print">
  .noprint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

然后把课程放在你需要的地方.就像一条建议……只有.yesPrint类才会打印出你需要的区域.您还必须将.noprint放在您不想打印的区域.

我已经在Chrome,IE10,IE9和IE8上测试了它,效果很好.