Safari打印媒体查询与其他浏览器不匹配/中断 [英] Safari Print Media Queries not matching other browsers / cutting off

问题描述

我有一个Web应用程序，在Safari中呈现时看起来不错，但是浏览器不尊重打印媒体查询.在Chrome中，整个可打印区域看起来都不错，但是在Safari中，它似乎只是可见内容的一部分.

I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.

在页面上向下滚动时，标题或顶部区域被切除，在页面上较高的位置打印时，底部被切除.

When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.

我已经尝试过以下方法进行打印媒体查询(无效)-

I've tried the following for the print media queries (with no effect) -

1. 设置min-height
2. 设置容器上height值的任何变化
3. 缩小并打印
4. 改变分辨率/比例

1. Setting a min-height
2. Setting any variation of a height value on the container
3. Zooming out and printing
4. Changing resolution / scale

似乎没有任何作用.

与Chrome不同，我找不到调试原因的方法，也找不到调试打印样式本身的方法.

Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.

注意-我使用的是Bootstrap样式，因此存在容器，行，跨度等...但是即使将它们完全删除，并且所有内容都独立行也没有区别，显示内容的相同高度"在打印中.

Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.

推荐答案

在我的案例中，将正文设置为原始A4宽度-> width: 210mm和height: 100%解决了该问题.

In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.

我一直在使用 PrimeFaces 的 PDFJS 查看器的修改版本 这是在Safari中成功完成操作的代码段:

I've been working with modified version of PDFJS viewer from PrimeFaces and here is a snippet that did the trick in Safari:

@page {
    size: A4;
    margin: 0;
}

html, body {
    width: 210mm; // A4 Paper width
    height: 100%;
}

注意:问题在于预览然后打印文档时pdf文档缩放比例不正确. FF和Chrome都很好.

note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.

希望它对使用PrimeFaces中PDFJS扩展名的人有所帮助.

Hope it helps somebody, who uses PDFJS extension from PrimeFaces.

这篇关于Safari打印媒体查询与其他浏览器不匹配/中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！