使用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中，这两条规则都不匹配。我还尝试了设备宽度和设备高度，但它们也不起作用（它们似乎报告的是打印机的绝对最大大小，而不是页面大小）。我搞不清楚“宽度”和“高度”返回的值是多少，有没有办法告诉我

---

是否有可靠的方法使用媒体查询检测打印页面大小？我很快就得出结论，根本没有办法在浏览器间以任何一致的方式控制打印，对此我认输了。

试试这段代码也许可以解决您的问题

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

---

我想知道它的确切宽度/高度是否有问题。您是否尝试过将其更改为类似于

最大宽度

或

最小高度

？只是尝试了一下，没有成功。考虑：

@media（最小宽度：8in）{body{font-weight:bold；}}}@media（最小宽度：10.5in）{body{font-style:italic；}}}这里有一些正文

这里，CSS在我调整窗口大小时被触发，但一旦我去打印，就再也不会触发任何东西（在Chrome中测试）。多年后。。。。。我也有这个问题。我正在使用SVG技术图表生成页面，我想根据所选的纸张大小更改布局。在我的例子中，我需要检查11x17、18x24和24x36纸张大小，以调整图表的大小（比例），并适当调整笔划宽度和文本高度的大小。有人知道怎么做吗？似乎已经深入研究了这些问题。您是否尝试过像@page{size:letter}这样的页面指令？而不是尝试做断点？字母为8.5x11英寸。还有其他选项：A5、A5景观A4、A4景观A3、A3景观信、景观信法律、景观信法律。上述代码应适用。对于A4横幅，CSS将是：

page[size=“A4”][layout=“landscape”]{宽度：29.7cm；高度：21cm；}

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