Safari 打印媒体查询与其他浏览器不匹配/中断

Posted 2023-03-06

【中文标题】Safari 打印媒体查询与其他浏览器不匹配/中断

【英文标题】：Safari Print Media Queries not matching other browsers / cutting off

【发布时间】：2016-12-04 20:10:39

【问题描述】：

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

在页面上向下滚动时，页眉或顶部区域被切断，在页面上打印时，底部被切断。

我已经尝试了以下打印媒体查询（无效）-

设置min-height 在容器上设置 height 值的任何变体 缩小和打印 更改分辨率/比例

似乎没有任何效果。

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

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

【问题讨论】：

你能提供一个jsfiddle作为例子吗？

是的，不幸的是 jsfiddle 无法重现，我在询问时放弃了。然后当回去尝试创建一个复制品时，我想出了原因。在 Chrome 中打印时，它说明了我不仅尝试打印正文，还尝试打印任何可见的东西，Safari 并没有考虑到这一点。如果您汇总一个详细说明我将很乐意奖励赏金的答案。技巧是使用模态或对话框打印内容，这样它就不会影响正文的整体高度。

@Dekel 在你面前

我无法重现该问题（如果不查看您的 html，将很难提供帮助）。请注意，如果您使用的是rel 标签，那么让print 媒体查询出现在其他媒体查询之后 很重要。如果您没有使用 rel 标签，但有内联 style 标签 - 请添加一些代码（它可以是一个 jsfiddle，只有在作为完整页面使用时才“工作”，而不是在 jsfiddle 结构内）所以我们可以尝试复制。

@PWKad 因为 Safari 对语法很严格。查看其他媒体查询的所有打开和关闭 括号。这可能是个问题。

【参考方案1】：

在上面的 cmets 中指出问题并提到这是免费赏金后，我没有得到任何答案。不幸的是，我很乐意放弃赏金，以便在赏金到期之前重新发布此内容的任何人都可以拥有它 -

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

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

Chrome 和 Firefox 对此很好，因为它打印了所有可见的内容，但在 Safari 中它只打印与正文一样高的内容，在这种情况下约为模态框的 30%。通过手动将正文触发为min-height: 1200px;，它解决了问题，因为这是引导模式对话框内容的最大可能高度。

【参考方案2】：

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

例如：

@media print 
    @page 
        size: 1600px;
    

    body,
    html 
        width: 1600px;
    

【参考方案3】：

在我的情况下，将正文设置为原来的 A4 宽度 -> width: 210mm 和 height: 100% 解决了这个问题。

我一直在使用 PrimeFaces 的 PDFJS 查看器的修改版本 这是一个在 Safari 中成功的 sn-p：

@page 
    size: A4;
    margin: 0;


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

注意： 问题在于预览和打印文档时 pdf 文档缩放不正确。 FF 和 Chrome 都很好。

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