Question

I have the following piece of code that generate a jquerymobile-style button

<a href="#" data-role="button"  
        data-theme="b" id="svbutton" style="position: absolute; top: 30%; margin-left: 0%;margin-right: 0%;  width: 80%; height: 20%; text-align: center;  font-size: 2.50em">Load Time...</a>

It is true that when the screen get re-scaled, the size of the button will change. However the size of the text does not change. Is there a way to change the size according to the size of the device-screen?

Answer 1

You could read the document’s width, or the button’s, and then make the font-size of the button relative to that width, eg.:

var buttonWidth = $('#svbutton').width();
var fontSize = buttonWidth / 10;
$('#svbutton').css('font-size', fontSize + 'px');

JSFiddle
http://jsfiddle.net/VFube/1