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

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.

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()" -eg the device is mobile and is not a tablet. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Answer 3

我认为正确的答案是使用响应式布局方法，因为您永远无法在所有各种设备上都做到这一点（每天有数百台新设备。）

Answer 4

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.

Answer 5

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.

Answer 6

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

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