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

我有一个网页应用程序，在Safari中呈现时看起来不错，但打印媒体查询不受浏览器的尊重。在Chrome中，整个可打印区域看起来很好，但在Safari中，它看起来只是可见内容的一些变化。Safari浏览器打印媒体查询不匹配其他浏览器/切断

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

我已经试过了印刷媒体查询（无效果）以下 -

设置一个min-height
容器
上设置height值的任何变化放大并打印
更改分辨率/比例尺

没有显示根本没有任何效果。

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

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

来源

2016-07-30 PW Kad

能为您提供的jsfiddle作为一个例子吗？ – Dekel

是的，不幸的是，jsfiddle无法复制，我在询问时放弃了。然后，当回去尝试创建一个repro时，我想出了为什么。当在Chrome中打印时，它说明了我不只是试图打印身体，而是看到任何可见的东西，Safari并没有考虑到这一点。如果你把一个答案详细说明，我会很乐意奖励赏金。招数是为打印内容使用模式或对话框，以便它不影响身体的整体高度。 –

@Dekel在你身边 –

在上面的评论中指出问题并提及它是免费的赏金后，我还没有得到任何答案。不幸的是，我很乐意给予赏金，所以任何在赏金到期前转贴的人都可以拥有它 -

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

经过检查，似乎Safari（也可能是其他浏览器）在计算身体高度时未考虑对话框高度。

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

来源

2016-08-16 23:53:52

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

例如：

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

    body, 
    html { 
     width: 1600px; 
    } 
}

来源

2017-10-03 20:07:02

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

回答

相关问题