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

Question

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

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

我已经尝试了以下打印媒体查询(没有效果)-

1. 设置最小高度
2. 在容器上设置 height 值的任何变化
3. 缩小和打印
4. 更改分辨率/比例

似乎没有任何影响。

与 Chrome 不同，我找不到一种方法来调试它为什么会发生，也找不到一种方法来调试打印样式本身。

注意 - 我将 Bootstrap 用于样式，因此有容器、行、跨度等......但即使完全删除它们并且所有内容都在它自己的行上也没有区别，显示内容的相同“高度”打印出来。

Answer 1

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

例如:

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

    body,
    html {
        width: 1600px;
    }
}