我有一个Web应用程序,在Safari中呈现时看起来很好,但浏览器没有遵守打印介质查询。在Chrome中,整个可打印区域看起来很好,但在Safari中,它似乎只是可见内容的一些变体。
在页面上向下滚动时,标题或顶部区域被切断,当在页面上打印较高时,底部会被切断。
我为打印媒体查询尝试了以下内容(没有效果) -
min-height
height
值的任何变体似乎没有任何效果。
与Chrome不同,我无法找到调试原因的方法,也无法自行调试打印样式。
注意 - 我正在使用Bootstrap作为样式,因此有容器,行,跨度等...但是即使完全删除它们并且它自己的行上的所有内容也没有区别,内容的相同“高度”显示在印刷品上。
答案 0 :(得分:1)
在我的案例中,将正文设置为原始A4宽度-> width: 210mm
和height: 100%
解决了该问题。
我一直在使用 PrimeFaces 的 PDFJS 查看器的修改版本 这是在Safari中成功完成操作的代码段:
@page {
size: A4;
margin: 0;
}
html, body {
width: 210mm; // A4 Paper width
height: 100%;
}
注意:问题在于预览然后打印文档时pdf文档缩放比例不正确。 FF和Chrome都很好。
希望它对使用PrimeFaces中PDFJS扩展名的人有所帮助。
答案 1 :(得分:0)
我在上面的评论中指出了这个问题并提到它是一个免费的赏金后,我在这里没有得到任何答案。不幸的是,我很想放弃赏金,所以任何在赏金到期之前重新发布的人都可以拥有它 -
问题是我使用的应用程序是一个JavaScript应用程序,它运行并创建只有大约400像素高的页面主体。在渲染正文之后,有一个单独的引导模式对话框,其中显示了要打印的内容,并且所有CSS都很好并且媒体查询很好但是模态的内容设置为大于正文。
经过检查,似乎Safari(可能还有其他浏览器)在计算身体高度时没有考虑到对话框的高度。
Chrome和Firefox很好用,因为它打印了所有可见内容,但在Safari中它只打印出与身体一样高的内容,在这种情况下大约是模式的30%。通过手动触发主体为min-height: 1200px;
,它解决了问题,因为这是Bootstrap Modal对话框内容的最大可能高度。
答案 2 :(得分:0)
过去,我遇到过跨浏览器打印媒体查询的许多问题。调节视觉效果很有帮助的是设置固定的页面大小和html / body。
例如:
@media print {
@page {
size: 1600px;
}
body,
html {
width: 1600px;
}
}