Javascript 在Firefox的打印模式下，Div中的文本/字体大小与“中的不同”；“正常”；模式

情况如下：我制作了一个工具，允许用户创建抽认卡（存储在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>

HTML：
第一部分中的较短文本
可能是第二个td中的一个looooong文本
CSS:
桌子{
表布局：固定；
边界塌陷：塌陷；
前分页符：始终；
}
td.cardtd{
宽度：470px；
最大宽度：470像素；
高度：300px；
最大高度：300px；
字体大小：11px；
填充顶部：20px；
垫底：20px；
左侧填充：22px；
右边填充：22px；
}
td.wrap{/*如果单词太长->将其打断*/
空白：pre；/*CSS 2.0*/
空白：预包装；/*CSS 2.1*/
空白：行前；/*CSS 3.0*/
空白：-预包装；/*Opera 4-6*/
空白：-o形预包装；/*Opera 7*/
空白：-moz预包装；/*Mozilla*/
空白：-hp预包装；/*hp打印机*/
换行：断开单词；/*IE 5+*/
}
分区大小{
显示：块；
最大宽度：继承；
最大高度：继承；
字体大小：100%；
溢出：隐藏；
垂直对齐：中间对齐；
文本对齐：居中；
}
Js:
$（函数（）{
$（'div.adjustsize'）。每个（函数（）{
var-fontSize=100；
而（this.scrollHeight>$（this.height（）&&fontSize>0）{
fontSize-=0.2；
$（this.css（'font-size'，fontSize+'%'）；
}
});
});

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

附言：我选择了td的宽度和高度，以便或多或少地将其放在A4纸上

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

最后，这个问题似乎只在打印预览（以及以后的实际打印）中出现，但我在代码中找不到相应的“错误”或不匹配

---

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

您可以使用打印css

<link rel="stylesheet" type="text/css" href="your file css here .css" media="print" />

检查此链接

或

    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 
            };