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 size. The text is dynamic.

Any help is greatly appreciated. ;)

Solution 1

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/#

Solution 2

OK - for starters, you should use Ems for as many measurements as you can in your UI. At the very least, size all of your text elements with Ems (rather than pixels or %'s). If possible, setting the width of layout blocks in Ems will help the app scale in proportion, too. If you can set all your dimensions in Ems, your entire app will be visually scalable.

The key to Ems is that they're sized relative to the font size of their parent element - which means you can adjust the size of all the text in proportion, by adjusting the font-size of the body element (since everything is relative to the body).

The last step is to use a piece of javascript to detect the width of the viewport, and set the font-size of the body accordingly. Depending on how fine-grained you want to control the scale, you can either use classes on the body element to set up a set of pre-defined values, or directly manipulate the font-size itself. I'd tend to use pre-determined sizes if possible to make testing easier.

I'd use a javascript library to make the detection of the viewport width easier - it's notoriously different in different browsers. With jQuery, the code could look like:

$(function(){
  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')}

});

And the CSS:

<style type="text/css">

  body {font-size:62.5%;}  /* Set the size of 1em to 10px in all browsers */

  body.extraWide {font-size:85%;}
  body.wide {font-size:75%;}

  body.narrow {font-size:50%;}
  body.extraNarrow {font-size:40%;}

</style>

Those values can be tweaked however you like, of course, and you can set up as many divisions as you want. This is very much a quick-and-dirty solution, but should do the trick.

A note - the javascript code shown will only set the scale once when the page is loaded - it won't adjust it when you change the size of your window. That's a possible addition, but there are bigger considerations before heading down that track. Personally, I'd even think about setting the scale value in a cookie, to keep the user's experience consistent throughout their session, rather than rescaling on every page load.

Solution 3

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

Solution 4

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

View more solutions