$（ウィンドウ）.resize（）と$（ドキュメント）.ready（）は異なる値を計算します

Question

私はjQueryを使ってテキストを適応させようとしています。ここではフィドルは次のとおりです。

http://jsfiddle.net/bq2ca7ch/

あなたはそれでいくつかのテキストをdiv要素を見ることができます。 divは指定された高さを持たず、高さはテキストの高さと上と下の10％のパディングから計算されます。

私はフォントサイズを応答したいと思っています。 divの元のサイズは124ピクセル、フォントサイズは50ピクセルだったので、この比率を維持したいとします。それは、私が知る必要があることを意味し、何パーセントが124から何パーセントですか。それは約40.32（50/124 * 100）です。つまり、font-sizeをvalueに設定する必要があります。コンテナの高さ/ 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); 

これは動作しているようですが、ページのサイズを変更したときだけです。私がそれをリロードすると、いくつかの異なる値があります。同じ関数が、サイズ変更とオンロードで異なる値を与えるのはなぜですか？

Answer 1

：

1. .theの機能は一度だけ実行すると、あなただけのリロード。

2.しかし、サイズを変更すると、関数は2回実行され、新しい高さに基づいて計算が再度行われるため、フォントサイズが変更されます。

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

サイズ変更方法が信頼できない： 主なものは、間違ってinnerheight

はこれを参照してください。計算されたサイズを変更の上にあります。 サイズ変更ハンドラ内のコードは、ハンドラが呼び出された回数に決して依存しないでください。インプリメンテーションに応じて、サイズ変更イベントが進行中（Internet ExplorerやSafariやChromeなどのWebKitベースのブラウザの典型的な動作）やサイズ変更操作の終了時に1回だけ、サイズ変更イベントを連続的に送信できますOperaなどのいくつかの他のブラウザ）。

Answer 2

私はこれで試してみましたが、私にとってはどちらも同じ結果を与えてくれました。してみてください。このため、私はそのサイズの変化を観察し何