用于打印纸张大小的 CSS 媒体查询

Question

世界各地的纸张形状不尽相同。我有一个文档，当它打印在 A4 和 US Letter 上时，我想以不同的方式打印。一些元素应该隐藏或显示。显而易见的建议是使用媒体查询，如下所示：

@media print and (max-height: 280mm) {
    .a4-only {
        display: none;
    }
}

但是，这似乎不起作用，大概是因为它使用的是总文档高度或一些不相关的窗口高度而不是页面高度。

有没有办法准确解决页面大小？

Answer 1

浏览器对打印特定媒体查询的支持多种多样，而且似乎没有任何好的资源。这种跨浏览器确实是不可能的，在某些浏览器中根本不支持。例如，Safari 似乎使用浏览器的大小而不是页面来进行媒体查询。

你可以让它在 Chrome 和 Firefox 中工作。我使用尺寸比例制作了一个非常粗略的演示，以展示通过一些工作可能实现的效果。目前在 macOS 上测试并处理当前版本的 Chrome 和 Firefox。您应该在页面的开头收到一条带有打印页面大小的消息（仅在打印时）。

http://gsgd.co.uk/sandbox/print-test.html

主要技巧是使用 vw 单位来检查高度，因此使用纵横比可以定位特定的纸张尺寸：

@media print and (min-height:160vw) and (max-height: 170vw) { /* legal-size styling */ .standard.container::before { content: "LEGAL"; } }
@media print and (min-height:135vw) and (max-height: 145vw) { /* A4 styling */ .standard.container::before { content: "A4"; } }
@media print and (min-height:125vw) and (max-height: 135vw)  { /* letter-size styling */ .standard.container::before { content: "LETTER"; } }

不幸的是，Chrome 的打印页面大小似乎与输出页面大小不匹配，所以我猜测了一些与 Chrome 匹配的样式。

@media print and (min-height:120vw) and (max-height: 150vw) { /* legal-size styling */ .chrome.container::before { content: "LEGAL"; } }
@media print and (min-height:100vw) and (max-height: 120vw) { /* A4 styling */ .chrome.container::before { content: "A4"; } }
@media print and (min-height:80vw) and (max-height: 100vw)  { /* letter-size styling */ .chrome.container::before { content: "LETTER"; } }

使用令人难以置信的基本浏览器检测器脚本

if(navigator.userAgent.match(/chrome/i)) {
    document.querySelector('.container').className = 'chrome container'
}

一个让 Safari 工作的想法是手动调整窗口大小，但这可能需要大量的工作，并且需要用户预先选择打印尺寸。

所有这一切都表明，您可能会获得更好的里程，以修复您的布局以更好地响应不同的宽度。