javascript - 在打印过程中调整页面大小时，我的 JavaScript 会被调用吗？

Question

我有一些简单的 HTML 调用 TextFill jQuery 库，用于将一些文本自动调整到我的布局中的可用空间。

屏幕上的布局很好，但打印出来时页面似乎已调整大小，需要相应地重新执行 JavaScript。

发生这种情况时我可以依赖 $(window).resize() 来调用吗？

有趣的是 body 宽度固定为 700px，但它似乎仍在调整大小？

文本的 div 设置为 50%，我有两个相邻的 div:

<div style="display:table; width:100%; border:1px solid black; border-right:none; border-bottom:none;">
    <div style="display:table-row;">
        <div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
            <div class="text_two_by_two text" style="padding-bottom:10px;">
                <span style="font-size: 47px;">some pockets</span>
            </div>
            <div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
                <img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_pockets.jpg">
            </div>
            <div style="border-bottom:solid 1px black;" class="write_two_by_two">&nbsp;</div>
        </div>
        <div style="display:table-cell; border:1px solid black; border-left:none; border-top:none; padding:20px; text-align:center; vertical-align:bottom;" class="td_two_by_two">
            <div class="text_two_by_two text" style="padding-bottom:10px;">
                <span style="font-size: 46px;">some earrings</span>
            </div>
            <div style="padding-bottom:10px; display:inline-block;" class="image_two_by_two">
                <img style="width:100%; max-height:100%; margin:auto; display:block;" src="some_earrings.jpg">
            </div>
            <div style="border-bottom:solid 1px black;" class="write_two_by_two">&nbsp;</div>
            </div>
        </div>
    </div>
</div>

CSS:

.td_two_by_two {
    width:50%;
}

.text_two_by_two {
    height:100px;
}

.image_two_by_two {
    height:180px;
}

.write_two_by_two {
    height:50px;
}

Javascript:

$(document).ready(function() {
    $('body').imagesLoaded(function() {
        $('.text').textfill({maxFontPixels:100, changeLineHeight:true});
    });
});

Answer 1

快速的回答是不...

您真的应该依靠 CSS 让您的打印品按照您希望的方式工作。关于为什么它没有，我没有很好的答案，但我们知道 CSS 有效，所以请尝试依赖它。您也可能会为您的网站找到一个完整的 CSS 解决方案。

使用

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