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

by

Hell yeah!

Set your <body> font size when the window is resized with a little javascript. (I’ve used jQuery for convenience here:

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

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

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

Because your font size is set in em’s (perfect) adjusting the percentage font-size of the body element acts as a universal ‘text zoom’. This will scale any text set in em’s – if you want to be more specific, you could set the percentage font-size on a <div> that surrounds just the elements you want to scale.

Here’s a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html

More Related Contents:

  1. Ignore mouse interaction on overlay image
  2. Div Z-Index issue with Flash movie
  3. I want to show list items as 2 or more columns (dynamic alignment)
  4. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?
  5. Close ad to continue as free user?
  6. How to add a black shadow on top of a div block with background image?
  7. How to read with JavaScript [closed]
  8. How do you read CSS rule values with JavaScript?
  9. Disabling browser print options (headers, footers, margins) from page?
  10. HTML selected option background-color CSS style
  11. How to dynamically create ‘@-Keyframe’ CSS animations?
  12. Make anchor link go some pixels above where it’s linked to
  13. Where should I put the CSS and Javascript code in an HTML webpage?
  14. width/height after transform
  15. Can I apply CSS to the elements within an iframe?
  16. “pointer-events: none” does not work in IE9 and IE10
  17. Dark mode flickers a white background for a millisecond on reload
  18. collapse and expand tabs jquery / simple accordion
  19. How to trigger CSS “hover state” using Javascript? [duplicate]
  20. Gaussian Blur onHover Using jQuery
  21. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  22. fade effect using javascript no jquery?
  23. Rotate div text after clicking on button using jquery and css
  24. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  25. HTML5 Video duration without playing video
  26. How to access css properties in javascript when applied via external CSS file?
  27. How to get element by class name
  28. Split text into pages and present separately (HTML5)
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment