Dynamically scale font-size to Height

Question

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:

Is it possible to dynamically scale text size based on browser width?

Only problem now is that the font-size doesn't change based on the height of the browser window.

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... :

 <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="./test_files/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $( 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 > 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();
        });
    </script>

Thanks in advance!

-- EDIT

here´s the solution, found it after ALOT of testing :) :

<!DOCTYPE html>

    <title>Dynamic text sizing</title>
    <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" charset="utf-8">
        $( 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 > 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();
        });
    </script>

EDIT: I only want the height, not the width property, just to avoid misunderstandings :) — user1092374, Dec 11 '11 at 16:06
SOLVED IT! Here´s the code for those who needs it: I have been looking for over a day for the answers: — user1092374, Dec 11 '11 at 17:25
Welcome to Stack Overflow! Thank you for posting the solution since you found it yourself - however, you should post it as an answer and accept the answer so that this question won't stay listed as unanswered. :-) — Aasmund Eldhuset, Dec 11 '11 at 21:39

Dynamically scale font-size to Height

0 Answers0