javascript - Div 中的文本/字体大小在 Firefox 中的打印模式与 "normal"模式下不同

Question

情况如下:我制作了一个允许用户创建抽认卡的工具(存储在 mysql 库中)。现在如果你想打印抽认卡，脚本会生成一个表格，其中 td 具有固定宽度(以 px 为单位)，里面是一个包含用户输入的抽认卡正面或背面文本的 div。由于文本的数量可能会有所不同，因此必要时会减小标准字体大小。看起来像这样:

HTML:
<table class="cardtable">
    <tr>
        <td class="cardtd wrap"><div class="adjustsize"> 
                  Shorter Text here in the first td
            </div></td>
        <td class="cardtd wrap"><div class="adjustsize"> 
                  Might be a loooooooooooooooong text here in the second td
            </div></td>
    </tr>
</table>


CSS:
table.cardtable {
    table-layout:fixed;
    border-collapse:collapse;
    page-break-before:always;
}

td.cardtd {
    width: 470px;
    max-width: 470px;
    height:300px;
    max-height:300px;
    font-size:11px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:22px;
    padding-right:22px;
}

td.wrap { /*if a word is too long -> break it */
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

div.adjustsize {
   display:block;
   max-width:inherit;
   max-height:inherit;
   font-size:100%;
   overflow:hidden;
   vertical-align:middle;
   text-align:center; 
}


Js:
<script type='text/javascript'>
    $(function() {
        $('div.adjustsize').each(function() {
            var fontSize = 100;
            while (this.scrollHeight > $(this).height() && fontSize > 0) {
                fontSize -= 0.2;
                $(this).css('font-size', fontSize + '%');
            }
        });
    });
</script>

所以现在我的大问题是:当我让脚本在 Firefox 中呈现表格时，JS 会正确调整字体大小，这意味着如果一开始文本太长，JS 会减小字体大小直到它适合 div。但是如果我想之后打印页面，在 firefox 的打印模式下，文本突然超过了 div，这意味着它的一部分不再可见(缩放 100%)!

PS:我选择的 td 的宽度和高度大概适合一张 A4 纸。

编辑:感谢您的建议。我尝试使用@media css 样式，并使用 window.onbeforeprint 和 window.onafterprint 函数检查了我能想象到的每个 css 值，看看是否有任何改变但没有改变。包括填充、边距、字母间距等在内的每个值都与以前完全相同，但是当我在 Firefox 中按“打印”时，预览会稍微压缩/缩小一些元素，导致文本占用更多行。奇怪的是，当在 Firefox 中使用某些允许您在打印模式下编辑代码的插件时，该插件会正确显示呈现的元素。

总而言之，问题似乎只出现在打印预览(以及稍后的实际打印)中，但我在代码中找不到相应的“错误”或不匹配。

我阅读了几篇关于 dpi 的文章，打印预览是否可能使用与我的浏览器不同的 dpi，因为它试图模仿/预览打印机(其 dpi 与屏幕不同)？

Answer 1

检查此链接 link

    var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
        console.log('onbeforeprint equivalent');
    } else {
        console.log('onafterprint equivalent');
    }
});

或

 var beforePrint = function() {
               //your code 
            };
            var afterPrint = function() {
              //your code 
            };