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

Question

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..

Solution 1

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.

Solution 2

When using wordpress, the wp_is_mobile function has the same problem as it will set the "mobile" flag for tablets and phones. My problem is I want phones to get a limited page without my top of page image slider to speed up the site download/draw. Tablets usually have faster wifi access rather than 3G or effectively slower than wifi 4g.

The responsive wordpress theme, Customizr, I'm using uses the auto adapting twitter bootstrap, but still runs too slowly on phones with big image pages. So the question for my site is not just screen size or resolution, but data and screen draw speed.

Rocco Aliberti in this forum on themesandco's website made a useful suggestion combining a browser detection plugin that sets up an is_tablet function then combining it with the built in wordpress wp_is_mobile function to get "wp_is_mobile() && !is_tablet()" -e.g. the device is mobile and is not a tablet. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Comments

[John Hunt]

I mean the collective 'you' in English. It's probably bad English, sorry.

[John Hunt]

Note: It turns out the database isn't very accurate, it reports a totally incorrect screen size for my Samsung Galaxy S.

[dsdsdsdsd]

the problem is that responsive is based upon pixels ... and now manufacturers are getting 1000 pixels across, even though the phone is only 5 inches across ... on such a small screen a responsive site would mistakenly push out the proverbial '2-column' version,.

[dsdsdsdsd]

your 768-heuristic argument makes sense ... but I wonder when that basis will go up? 1 year, 3 years? ... ... but still I like it.

[Stijn de Witt]

@dsdsdsdsd Actually, responsive design is usually based on CSS pixels which are not the same as device pixels. The vendor basically already did the math for you and gives you 'pixel' that takes the physical device size into account. For example, iPhone 4's screen is reported as being 320x480 CSS pixels. Read Quirksmode: A pixel is not a pixel is not a pixel