Safari Print Media查询与其他浏览器不匹配/切断

时间:2016-07-30 03:47:23

标签: css printing safari media-queries

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

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

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

  1. 设置min-height
  2. 设置容器上height值的任何变体
  3. 缩小并打印
  4. 更改分辨率/比例
  5. 似乎没有任何效果。

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

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

3 个答案:

答案 0 :(得分:1)

在我的案例中,将正文设置为原始A4宽度-> width: 210mmheight: 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;
    }
}