CSS媒体查询打印纸尺寸 [英] CSS media queries for print paper size

问题描述

纸张的形状与世界不同.我有一个文档，要在A4和US Letter上打印时要打印不同的内容.一些元素应该被隐藏或显示.明显的建议是使用像这样的媒体查询:

Paper isn't the same shape the world over. I have a document that I want to print differently when it's printed on A4 versus US Letter. Some elements should be hidden or shown. The obvious suggestion is to use a media query like so:

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

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

This doesn't appear to work, though, presumably because it's using the total document height or some irrelevant window height rather than the page height.

有没有一种方法可以准确地处理页面大小?

Is there a way of addressing page size accurately?

推荐答案

浏览器对打印特定媒体查询的支持各不相同，并且似乎没有很好的资源.跨浏览器确实是不可能的，在某些浏览器中根本没有支持.例如Safari，似乎使用浏览器的大小而不是页面来进行媒体查询.

Browser support for print specific media queries is varied and there doesn't seem to be any good resources for it. It's really not possible to do this cross-browser, in some browsers the support is not there at all. Safari for example, seems to use the size of the browser rather than the page for it's media queries.

您可以在Chrome和Firefox中使用它.我使用大小比例完成了一个非常粗糙的演示，以显示通过一些工作可以实现的目标.目前已测试，并且可以在macOS上使用最新版本的Chrome和Firefox.您应该在页面开头收到一条消息，其中显示了已打印的页面大小(仅在打印时显示).

You can get it working in Chrome and Firefox. I knocked up a very rough demo using the size ratio to show what is possible with a bit of work. Currently tested and working on current versions of Chrome and Firefox on macOS. You should get a message at the start of the page with the printed page size (only when printed).

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

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

The main trick is using vw units to check for height, hence using the aspect ratio you can target specific paper sizes:

@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匹配的样式.

Unfortunately it seems like Chrome's page sizes for printing don't match the output page size so I guesstimated some styles that match for 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"; } }

具有极其基本的浏览器检测器脚本

With an incredibly rudimentary browser detector script

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

要使Safari正常运行的想法是手动调整窗口大小，但这可能需要大量工作，并且需要用户预先选择打印尺寸.

An idea to get something to work for Safari would be to manually resizing the window, but that would likely be a ton of work and require the user to select print size up front.

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

All that said you might get better mileage fixing up your layout to respond better to different widths.

这篇关于CSS媒体查询打印纸尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！