How to adjust text on the web page page on changing window size?

Question

i am using mobile jquery for designing. i want to adjust the text on my webpage/screen so that it will auto adjust on all the mobile devices. How can i acive this? any idea?

Answer 1

Set the width and height on the body and html elements to max out the page. I know, it's odd that you have to set the html element too, but that's life.

html, body {
    width:100%;
    height:100%;
}

In your markup define your sections.

<section>...</section>
<section>...</section>
<section>...</section>

And resize your sections to fit on load and when the page is resized. Something like:

function draw() {
    var width = $(document).width();
    var height = $(document).height();

    $("section").width(width).height(height);
}

$(document).resize(draw);
$(draw);