How reliable is detecting mobile devices by screen resolution?

Question

This sounds a bit too good to be true, so please tell me if it is.

If I have just one single version of a mobile website (no variations for different devices, just one website for all mobiles), how reliable it is to detect mobile devices by screen resolution?

And simply serve the mobile version if screen resolution is < than say 400px.

NOTE: My question assumes that javascript is enabled. Also,I'm aware there's user agent detection, but I'd like to do without it.

Answer 1

Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)

Width seems to be most reliable on window.outerWidth across all OS's.

Read a most excellent analytical report here:

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

Answer 2

You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

There's a detailed article on this subject over at alistapart

Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.

Answer 3

I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test. I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.

I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.