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, because points are tappable and the shouldn't be too close (physically).

For example: if someone has an iPhone, I want to display N points on the line graph. If he has an iPad, i want to display 2xN points (cause iPad has physically larger screen), but if he has some newer Android phone that is physically small like an iPhone but has a screen with many pixels (like an iPad), I want to display N points, because the points are physically small (and closer together).

So is there a way to get this data? An alternative is determining whether the device is a tablet.

Answer 1

What you want is to check the device's pixel density - measured in DPI - as @Smamatti already mentioned you control this with CSS media queries.

Here's an article on how to cope with varying DPIs and screen sizes, using those CSS media queries.

UPDATE: here's the javascript function (from the above link) that uses a trick to figure out the current device DPI:

function getPPI(){
 // create an empty element
 var div = document.createElement("div");
 // give it an absolute size of one inch
 div.style.width="1in";
 // append it to the body
 var body = document.getElementsByTagName("body")[0];
 body.appendChild(div);
 // read the computed width
 var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
 // remove it again
 body.removeChild(div);
 // and return the value
 return parseFloat(ppi);
}

Hope this helps!