$(window).resize() 和 $(document).ready() 计算不同的值

Question

我正在尝试使用 jQuery 使文本自适应。这是小提琴：

http://jsfiddle.net/bq2ca7ch/

您可以看到一个包含一些文本的 div。 div 没有指定高度，它的高度是根据文本高度和顶部和底部 10% 的填充计算得出的。

我希望字体大小能够响应。假设 div 的原始大小是 124px，font-size 是 50px，所以我想保持这个比例。这意味着我需要知道 50 与 124 的百分比是多少。大约是 40.32 (50/124*100)。这意味着我需要将字体大小设置为值，等于容器高度/100 * 40.32。这是我使用的代码：

function foo(){
var container = $(".box");
var containerHeight = $(".box").innerHeight().toFixed();
var neededSize = (containerHeight/100*40.32).toFixed();

container.css("font-size", neededSize + "px");
}

$(window).resize(foo);
$(document).ready(foo);

这似乎有效，但仅当我调整页面大小时。当我重新加载它时，会有一些不同的值。为什么同一个函数在 resize 和 onload 上给出不同的值？

Answer 1

我观察到 Size 发生变化的原因是：

1.当你重新加载时，函数只运行一次。

2.但是当你调整大小时，函数会运行两次并改变字体大小，因为再次计算是基于新的高度。 主要是调整大小它计算错误innerheight

看这个：

function foo(jQuery ){
    var container = $(".box");
    var containerHeight = $(".box").innerHeight(true).toFixed(2);
    var neededSize = (containerHeight/100*40.32).toFixed(2);
alert(containerHeight );
    container.css("font-size", neededSize + "px");
}

$(window).resize(foo);
$(document).ready(foo);

调整大小的方法不可靠。 调整大小处理程序中的代码不应依赖于调用处理程序的次数。根据实现，调整大小事件可以在调整大小进行时连续发送（Internet Explorer 和基于 WebKit 的浏览器，如 Safari 和 Chrome 中的典型行为），或者仅在调整大小操作结束时发送一次（典型行为在其他一些浏览器，例如 Opera）。

Answer 2

我试过这个，它对我有用，两者都给我同样的结果。试试这个container.css("font-size":neededSize + "px");