我有一个 div，我在其中使用 protovis 创建了一个图表. div 具有 width: 100% 和 height: 100% 并且创建图表的代码使用 $('#chart').width() 和 $('#chart').height() 在呈现时获取 div 的大小并用图表填充页面。我捕获窗口上的调整大小事件并调整 div 和图表，以便它在窗口调整大小时调整大小。
现在我需要打印。我本来希望当浏览器为打印机呈现页面时它会发出调整大小但它不会，至少 Safari 和 Firefox 不会。 Chrome 做了一些奇怪的事情，它只调整高度而不调整宽度。有没有办法在打印之前触发此行为？
编辑。考虑以下 html
<html>
<head>
<title>Resize</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chart').resize(function() {
$(this).html('chart size is ' + $('#chart').width() + ' x ' + $('#chart').height());
})
});
$(window).resize(function() {
$('.resizable').resize();
});
</script>
<style type="text/css">
#chart { width: 100%; height: 100%; background: gray; border: 1px solid black;}
</style>
</head>
<body>
<div id="chart" class="resizable">
</div>
</body>
</html>
当我调整窗口大小时，div 的内容发生变化。当我打印它时，渲染过程不会触发调整大小事件。
最佳答案
@media print css 规则可能会在此处提供帮助，而不是通过事件改变图表属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/%40media
@media print{
#chart { width: 100%; height: 98%; background: gray; border: 1px solid black;}
}
使用此方法，这些样式属性将应用于打印，无论您进行了哪些其他更改。
关于javascript - 打印时触发调整大小事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3538260/