I was wondering if it is possible to detect the screen density from a web page by using javascript and/or some sort of server checking based on http headers on PHP. My goal is to check if the user is accessing the site from a tablet, phone or puter to adjust some button sizes - imagens on a html5 canvas. Exact pixel values may lead to buttons too small or too big depending on the screen density...

I was wondering if it is possible to detect the screen density from a web page by using javascript and/or some sort of server checking based on http headers on PHP. My goal is to check if the user is accessing the site from a tablet, phone or puter to adjust some button sizes - imagens on a html5 canvas. Exact pixel values may lead to buttons too small or too big depending on the screen density...

• javascript
• html
• image-resizing

• This is really a job for media queries. You're looking for the "device pixel ratio", but other than that there's really no way to be sure of the actual physical geometry of a client device. – Pointy Commented Jun 26, 2013 at 16:42
• As an alternative to that, you could just check whether it's a tablet, cell phone or a regular lap/desk top browser by checking the user agent. Pretty much every mobile device nowadays has a similar pixel density, so most people I know don't check for screen resolution in such a precise way as you are asking. – Geeky Guy Commented Jun 26, 2013 at 16:42

2 Answers 2

I think most mobile browsers support window.devicePixelRatio.

Most browsers support devicepixelratio with the exception of Internet Explorer versions 8 through 10. Thankfully as of January 12th 2016 all those versions have been officially deprecated and will no longer be supported by Microsoft with security updates or technical support.