Physical screen size 'detection' based off user agent in PHP/javascript

John Hunt picture John Hunt · Nov 23, 2011 · Viewed 11k times · Source

So, there are ways to detect 'mobile' browsers and screen sizes using javascript and php.. however, the screen size is always returned in pixels and mobile can mean anything these days.

I want to be able to know how big a device display is when it's mobile, what with tablets popping up everywhere. The reason for this is because I want to select a stylesheet for devices with small screens and default to the normal stylesheet for everything else. For example, I want an iPad, kindle fire, hp touchpad etc. to display the normal stylesheet but I want a different stylesheet for cellphones or any device that has a display about the size of a human hand.

Now, I'm guessing something to do this doesn't exist but perhaps someone's thought of a better way or knows of a database somewhere that has dimensions for screen sizes somewhere..hmm

..maybe there's a way of finding pixel density and then applying the screen width/height in pixels to this..

Answer

Andz picture Andz · Nov 12, 2012

I actually think this is a very good question. The unsatisfactory situation right now is that on 10" tablets you get served a giant, space-wasting single-column "mobile" site by default when the desktop version would have been just fine.

Unfortunately, as John Hunt has discovered, even WURFL does not give accurate physical screen size.

One semi-workaround is a heuristic assuming that if either the x or y dimension is less than 768 pixels then you are on a phone(*) and thus serve the single-column "mobile" version of your site by default.

You should still always allow the visitor to choose between mobile or desktop. Better still, just call it the "single-column" or "slim-width" version of your site to avoid misnomers.

(*) Why 768 pixels? Because all 10" tablets of any importance are at least 1024x768 or 1280x800, whereas even phones with big screens such as the iPhone 5 or HTC HD5 have widths less than 768 pixels (iPhone 5 - 640x1136, HTC HD5 1280x720). This will probably not work on the giant samsung screens, but on those devices, having the desktop version served by default is not as annoying.