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

主要技巧是使用大众设备单位来检查高度，因此使用长宽比可以指定特定的纸张尺寸：

@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正常运行的想法是手动调整窗口大小，但这可能需要大量工作，并且需要用户预先选择打印尺寸。

所有这些都说明您可能会更好地解决布局问题，以更好地响应不同宽度。

CSS媒体查询打印纸尺寸

1 个答案: