Databases
StackOverflow2013
Postsdbo
PODynamically scale font-size to Height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically scale font-size to Height
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload