title: Dynamically scale font-size to Height
body: <p>I am working with a site that requires perfect viewing in all resolutions. Because of this I have used ems, % and the code found in the thread below:</p>
  
  <p><a href="https://stackoverflow.com/questions/5358183/is-it-possible-to-dynamically-scale-text-size-based-on-browser-width">Is it possible to dynamically scale text size based on browser width?</a></p>
  
  <p>Only problem now is that the font-size doesn't change based on the height of the browser window.</p>
  
  <p>Does anyone know how to change this code to get the height of the browser so I can make to font adjust not only to width but also to height? (I tried to change the "scaleSource = $body.width()," to "scaleSource = $body.height()," but it didnt make anything happen... : </p>
  
  <pre><code> &lt;!--[if IE]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;script src="./test_files/jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          $( document ).ready( function() {
              var $body = $('body'); //Cache this for performance
  
              var setBodyScale = function() {
                  var scaleFactor = 0.35,
                      scaleSource = $body.width(),
                      maxScale = 600,
                      minScale = 200;
  
                  var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
  
                  if (fontSize &gt; maxScale) fontSize = maxScale;
                  if (fontSize &lt; 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();
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>-- EDIT</p>
  
  <p>here´s the solution, found it after ALOT of testing :) :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>    &lt;title&gt;Dynamic text sizing&lt;/title&gt;
      &lt;!--[if IE]&gt;
              &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          $( document ).ready( function() {
              var $body = $('body'); //Cache this for performance
  
              var setBodyScale = function() {
                  var scaleFactor = 0.55,
                      scaleSource = $(window).height(),
                      maxScale = 600,
                      minScale = 10;
  
                  var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
  
                  if (fontSize &gt; maxScale) fontSize = maxScale;
                  if (fontSize &lt; 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();
          });
      &lt;/script&gt;
  </code></pre>