使用 CSS 媒体查询检测打印页面大小
Posted
技术标签:
【中文标题】使用 CSS 媒体查询检测打印页面大小【英文标题】：Detecting printed page size with CSS media queries 【发布时间】：2013-12-20 02:44:26 【问题描述】：我的应用程序通过创建一个不可见的 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 中都不匹配。我还尝试了设备宽度和设备高度，但它们也不起作用（它们似乎报告了打印机的绝对最大尺寸，而不是页面大小）。我无法弄清楚“宽度”和“高度”返回的值是什么，有没有办法告诉？
是否有可靠的方法来使用媒体查询来检测打印页面的大小？我几乎可以得出这样的结论：没有方法可以在浏览器之间以任何一致的方式控制打印，并就此认输。
【问题讨论】：
我想知道它是否有精确的宽度/高度问题。您是否尝试将其更改为max-width 或 min-height 之类的？
刚试过，不行。考虑一下：<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> here is some body text </body> </html> 在这里，当我调整窗口大小时触发 CSS，但是一旦我去打印什么都不会触发（在 Chrome 中测试）。
多年后.....我也遇到了这个问题。我正在使用 SVG 技术图表生成页面，并且我想根据所选的纸张尺寸更改布局。就我而言，我需要检查 11x17、18x24 和 24x36 的纸张尺寸以调整图表的大小（比例）以及适当地调整笔划宽度和文本高度。有人知道怎么做吗？
this paper-css github project 似乎已经深入研究过此类问题。
你试过像 这样的页面指令吗？而不是尝试做断点？字母为 8.5x11 英寸。还有其他选择：A5、A5横排A4、A4横排A3、A3横排信、信横排合法、合法横排
【参考方案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);
【讨论】：
上面的代码应该可以工作。对于 A4 横向，CSS 为：page[size="A4"][layout="landscape"] width: 29.7cm; height: 21cm; 以上是关于使用 CSS 媒体查询检测打印页面大小的主要内容，如果未能解决你的问题，请参考以下文章