jQuery Fitput is designed to make your inputs scalable to all resolutions. This plugin was inspired by fitText.js when I noticed it didn't support inputs and select boxes.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.fitput.js"></script>
Download Here:
jquery.fitput.js
jquery.fitput.min.js
Works on literally any input or select element.
The compression is slightly different to fitText since its actually based by the width of the window and not the parent container.
But with some extra tinkering. You should be able to get an identical effect on inputs and select boxes.
/*
The actual algorithm for scaling is
(window width) / ( 12.5 * X)
X being the parameter inputted.
*/
$('.input').fitPut(1);
$('.select').fitPut(2);
//Yes its really that easy!
The larger the number. The smaller the text!
There's an additional object you can attach which can specify max and minimum font size!
var fpObj = {
min: 24, //Minimum Font Size (px)
max: 48 //Maximum Font Size (px)
//Please make sure to use integers only the object does not read strings with px in them.
}
$('.customSize').fitPut(1,fpObj);
//Slightly more complex, but with so much more flexibility!