Question

我有一个Web应用程序，在Safari中呈现时看起来很好，但浏览器没有遵守打印介质查询。在Chrome中，整个可打印区域看起来很好，但在Safari中，它似乎只是可见内容的一些变体。

在页面上向下滚动时，标题或顶部区域被切断，当在页面上打印较高时，底部会被切断。

我为打印媒体查询尝试了以下内容（没有效果） -

似乎没有任何效果。

与Chrome不同，我无法找到调试原因的方法，也无法自行调试打印样式。

注意 - 我正在使用Bootstrap作为样式，因此有容器，行，跨度等...但是即使完全删除它们并且它自己的行上的所有内容也没有区别，内容的相同“高度”显示在印刷品上。

Answer 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扩展名的人有所帮助。

Answer 2

我在上面的评论中指出了这个问题并提到它是一个免费的赏金后，我在这里没有得到任何答案。不幸的是，我很想放弃赏金，所以任何在赏金到期之前重新发布的人都可以拥有它 -

问题是我使用的应用程序是一个JavaScript应用程序，它运行并创建只有大约400像素高的页面主体。在渲染正文之后，有一个单独的引导模式对话框，其中显示了要打印的内容，并且所有CSS都很好并且媒体查询很好但是模态的内容设置为大于正文。

经过检查，似乎Safari（可能还有其他浏览器）在计算身体高度时没有考虑到对话框的高度。

Chrome和Firefox很好用，因为它打印了所有可见内容，但在Safari中它只打印出与身体一样高的内容，在这种情况下大约是模式的30％。通过手动触发主体为min-height: 1200px;，它解决了问题，因为这是Bootstrap Modal对话框内容的最大可能高度。

Answer 3

过去，我遇到过跨浏览器打印媒体查询的许多问题。调节视觉效果很有帮助的是设置固定的页面大小和html / body。

例如：

@media print {
    @page {
        size: 1600px;
    }

    body,
    html {
        width: 1600px;
    }
}