How do I increase the font size based on the window width?

Question

I am creating a web-based app that will be displayed on television and other large monitors. I am wanting a quick and easy way to increase the font size to fit the window si

Answer 1

Here would be my approach (with removing actual classes + Drupal 7 jQuery):

(function ($) {
$(document).ready(function() {


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile');

function setBodyClass(){
  // remove previous classes
  for(x in bodyClassArr){
      if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); }
  }
  var viewPortWidth = $(window).width();
  if (viewPortWidth > 1900) { $('body').addClass('extraWide'); }
  else if (viewPortWidth > 1400) { $('body').addClass('wide'); }
  else if (viewPortWidth > 1000) { $('body').addClass('normal'); }
  else if (viewPortWidth > 700) { $('body').addClass('narrow'); }
  else if (viewPortWidth < 700) { $('body').addClass('mobile'); }
  else { $('body').addClass('normal'); }
};
setBodyClass();

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

}); // jquery end
}(jQuery));

Answer 2

I know this in quite an old question, but I will be answering anyways due to this being a question that could be searched upon a lot.

There is actually another approach other than Media Queries which is also pure CSS:

---

Viewport units: vw, vh, vmin, vmax.

These are length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

So for example you could use:

CSS:

body {
    font-size:5vmin;
}

This sets the font-size of the entire document to 5% of the smallest viewport size (the width or the height). So for instance on an iPad (1024 x 768 px) the font-size will be 38,4 px (5% of 768 px because this is the smallest size of either viewport sizes).

Browser compatibility: https://caniuse.com/#feat=viewport-units

Answer 3

If you're interested in / able to use CSS3 then there is a pure CSS solution - media queries >> http://www.w3.org/TR/css3-mediaqueries/

So for example, the CSS:

@media screen and (min-device-width: 800px) { ... }

...allows you to specify different styles for the page when displayed on a 800px screen or greater. Obviously you can vary this as you like - powerful stuff

You may also want to consider the prewritten javascript at the end of this link ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 4

Beejamin's answer worked as expected, I added a set timeout so it would scale in real time. It doesn't reverse scale though.

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
      else if (viewPortWidth > 1400) {$('body').addClass('wide')}
      else if (viewPortWidth > 1000) {$('body').addClass('standard')}
      else if (viewPortWidth > 700) {$('body').addClass('narrow')}
      else {$('body').addClass('extraNarrow')}

      setTimeout(scaleFont, 100); 
    }

EDIT: SOLVED REVERSE EFFECT

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
      else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
      else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}


      setTimeout(scaleFont, 100); 
    }

Answer 5

Heres a simpler and no-jquery solution:

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

Answer 6

A better version (for me) of the solution provided by japanFour:

$(document).ready(scaleFont);
$(window).resize(scaleFont);


function scaleFont() {

  var viewPortWidth = $(window).width();

  if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
  else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
  else if (viewPortWidth >= 1000) {$('body').attr('class','');}
  else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
  else {$('body').attr('class','extraNarrow');}
}

So it resizes only if window is resized (avoiding setTimout), and you give body only the exact class it needs