我有一个Web应用程序在Safari中呈现时看起来很好,但打印媒体查询不被浏览器所尊重.在Chrome中,整个可打印区域看起来都很好,但是在Safari中它似乎只是可见内容的一些变体.
当在页面上向下滚动时,标题或顶部区域被切断,当在页面上打印较高时,底部被切断.
>设置最小高度
>设置容器上高度值的任何变体
>缩小和打印
>改变分辨率/刻度
根本没有任何效果.
与Chrome不同,我找不到调试为什么发生的方法,也不能调试打印样式本身.
注意 – 我正在使用Bootstrap进行样式,所以有容器,行,跨等等,但是即使完全删除它们,也就是所有在它自己的行上都没有区别,打印时会显示相同的“高度”内容.
解决方法
在上述评论中指出问题后,我没有得到任何答案,并提及这是一个免费的赏金.不幸的是,我很想给予赏金,所以任何人在赏金到期之前转贴,可以拥有它 –
问题是我正在使用的应用程序是一个JavaScript应用程序,它运行并创建的页面大小只有大约400px高.身体渲染后,还有一个单独的引导模态对话框,其中显示要打印的内容,所有CSS都很好,媒体查询很好,但是模态的内容设置为大于身体.
经过检查,似乎Safari(并可能还有其他浏览器)在计算身体高度时没有考虑到对话框的高度.
Chrome和Firefox很好,因为它打印了所有可见的内容,但在Safari中,它只打印与身体一样高的内容,在这种情况下,大约是模态的30％.通过手动触发身体的最小高度：1200px;它解决了这个问题,因为这是Bootstrap Modal对话框内容的最大高度.
