動的な単位を塗りつぶすためのフォントサイズ

Question

コンテナを塗りつぶすためにフォントサイズを調整しようとしています。これだけでは明らかに問題ではありません。しかし、コンテナは静的なサイズでもなく、サイズはブラウザウィンドウの％に設定されており、ブラウザのサイズ変更時にコンテナとともに動的にフォントサイズを更新したいと考えています。

私はブラウザの高さと幅の％でフォントサイズを調整した修正スクリプトを使用していました。

$(document).ready(function() { 
    var $body = $('body'); //Cache this for performance 

    var setBodyScale = function() { 
     var scaleFactor = 0.0001, 
      scaleSource = $(window).height(), 
      scaleSource2 = $(window).width(), 
      maxScale = 200, 
      minScale = 10; 

     var fontSize = (scaleSource * scaleSource2) * scaleFactor; //Multiply the width of the body by the scaling factor: 

     if (fontSize > maxScale) fontSize = maxScale; 
     if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums 

     $('body').css('font-size', fontSize + '%'); 
    } 

    $(window).resize(function(){ 
     setBodyScale(); 
    }); 

    //Fire it when the page first loads: 
    setBodyScale(); 
}); 

私はこれから望ましい結果を得ることができませんでしたので、スケールソースがウィンドウではなくコンテナであるように変更してみました。しかし、これはややうまく動きましたが、動的に更新されませんでした。ページの更新が必要になります。

要するに、サイズはブラウザウィンドウの％によって決定されるコンテナを満たすために、フォントサイズを変更する方法を見つけることができません。

Answer 1

なぜ既存のものを発明したのですか？ http://fittextjs.com/

Answer 2

これは、現実世界の答えではない、まだ、しかし、ビューポート依存のフォントサイズが地平線上にある：

http://css-tricks.com/viewport-sized-typography/

現在それだけではサポートされていますそこに素晴らしいjQueryのツールがすでにありますクロムカナリアン、それが来ていることを知って良いです。