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

Calgary

Browser sniffing is a flawed strategy. You can't reliably get screen size from the user agent string. And even if you can, it means you are going to have to deal with each different size for each diffrent device (and possibly user agent as well). Explain your issue and you might get help on how to deal with it. – Commission

"however, the screen size is always returned in pixels" - why is that a problem? Isn't the number of pixels much more important than actual screen size? – Lithiasis

No, imagine you have a really tiny 8000x20000px (theoretical example) screen which is about 4cm x 8cm or whatever.. you don't want your really cluttered page on that tiny thing regardless of whether the resolution will be able to resolve it nicely. – Calgary

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

Sphalerite

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

Answer 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

Prase

Answer 3

http://wurfl.sourceforge.net/nphp/

Looks like you can get this infomation from the WURFL API..cool!

Calgary

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

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

Answer 4

The right answer I think it's to use a responsive layout approach as you'll never get it right for all the various devices (there are 100s of new ones every day..)

Calgary

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,. – Fudge

@Fudge 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 – Severance

Answer 5

You can use frameworks like Bootstrap that show/hide columns or data based on screen resolution. This works nice as far as just displaying is concerned.

But ideally you would also want your scripting language to know this so that it would not process/execute certain data which is not going to get displayed by bootstrap.

At this moment browser agent does not provide screen resolution. Which should be enabled as modern websites have to be responsive to at least popular mobile, tablet and computer.

This is my wishlist for future versions of HTTP/W3c/Browser implementation.

Mystagogue

Answer 6

you can check the screen size through javascript innerWidth gives/return the width of the device whether you are in the desktop or mobile phones, more filter you can you an user agent with this javascript innerWidth code.

then after that you can apply the css on the basis of screen sized.

Derekderelict