$（window）.resize（）和$（document）.ready（）计算不同的值

Question

I am trying to make text adaptive using jQuery. Here is the fiddle:

http://jsfiddle.net/bq2ca7ch/

You can see a div with some text in it. The div doesn't have a specified height, and it's height is calculated from text height and 10% paddings on top and bottom.

I want font-size to be responsive. Let's say, div's original size was 124px, and font-size was 50px, so I want to keep this ratio. That means I need to know, what percent 50 is from 124. It is about 40.32 (50/124*100). That means that I need to set font-size to value, equal to container height/100 * 40.32. Here is the code I used:

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

That seems to be working, but only when I resize the page. When I reload it, there is some different value. Why does the same function gives different values on resize and onload?

Answer 1

What i observed that Size changes because :

1. When you just reload .the function runs only once.

2.But when you resize , the function runs twice and changes the font size because the again calculations are done based on new height. Main thing is on resize it is calculating wrong innerheight

See this:

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

Resize method is not reliable. Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

Answer 2

I tried with this , it worked for me both are giving the same result for me . try this container.css("font-size":neededSize + "px");