Mobile web: how to get physical pixel size?

Question

I am creating a web app using jQuery Mobile and PhoneGap. There is a graph and if the user is using a large screen, I would like to display more points on this graph, becaus

Answer 1

I searched all over and found a lot of half solutions. This works on android, iphone, and the web. In your CSS use rem values to scale proportionately.

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});

Update: I Now use something closer to this. It works in more cases. Ratio changes depending on the project, and the orientation. And I employ a class on the body tag that will change the CSS.

var landscapeUnitsWideThatIWantToBuildThisProjectTo = 50;
var unitsWideThatIWantToBuildThisProjectTo = 30;

var landscape = isLandscape();
var ratio = landscape ? landscapeUnitsWideThatIWantToBuildThisProjectTo : unitsWideThatIWantToBuildThisProjectTo; 
var font = Math.round(width / ratio);