Tuesday, January 7, 2014

Web page scaling to the device!

Web page scaling to the device! Even with different pixel ratios! Will work with android, iPhone and web!

var dpi = window.devicePixelRatio || 1;
var width = $(window).width();
var ratio = 52; //Ratio of target font size to screen width screenWidth/idealFontSize
var font = Math.ceil((width / dpi / ratio)+dpi*3);
if(font < 15)
    font = 15;
// any less is not useable.

$("html").css({"fontSize": font});

Enjoy!