Take the 2-minute tour ×

I have a simple static website with a couple lines of text in it.

It will be accessed only from mobile devices, and I want that the font size for the text will be 1/3rd of the screen's height and lines to word wrap based on the screens width.

can it be done using CSS & HTML only? if so how?


share|improve this question

1 Answer 1

up vote 0 down vote accepted

The simple answer is to programmatically serve a stylesheet based on the mobile device. You can do this in your CSS file with :

  font-size: 160px; /* 1/3 max screen height */

Alternately, you could use javascript to calculate the width and height of the viewport then set the style dynamically.

window.onload = function() {
  var viewportwidth;
  var viewportheight;

  if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
  } else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
      viewportwidth = document.documentElement.clientWidth,
      viewportheight = document.documentElement.clientHeight
  } else {
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
  document.body.style.fontSize = viewportheight / 3;

Set wordwrapping in CSS with white-space: normal and, if desired, word-wrap:break-word

share|improve this answer
Thank you, works great! (corrected 'el if' to 'else if') –  Ben Sep 9 '11 at 20:13
Sorry about the typo. sometimes I rush too much. Correcting now. –  stslavik Sep 9 '11 at 20:18
For some reason all fonts under "Body" now have the same size even thought in some classes I set them to be 30% of the parent. Any ideas how to fix this? –  Ben Sep 21 '11 at 9:22
It's an inheritance issue. The safest way is to never expect an element to inherit properly. If your font-size for the body is 160px (I believe that was what you'd wanted when you initially asked – that all copy be 1/3 the screen), you could set your element to 38px (30%) explicitly. With CSS, expect the unexpected. –  stslavik Sep 21 '11 at 16:28

Your Answer


