6

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
CodeVirtuoso
  • 6,318
  • 12
  • 46
  • 62
  • 3
    Why would you like to do without user agent detection? It makes sense to use as many variables as possible to determine something like this. Also, I'd say user agent detection is more reliable than screen resolution if you're trying to target certain devices, i.e. "I want to make sure Windows Mobile Phones get special treatment." Also, I'd like to add that User Agent Detection will make testing easier. Using screen resolution is, however, very good in that it's a type of feature detection and it's pretty reliable to use that information to display a "small screen" version of your site. – nedk Jan 28 '11 at 14:08
  • I agree to an extent, for targeting specific devices detecting UA is the way to go, also for detecting devices without javascript. But in my specific case, js is required to run the website anyway + there's one mobile website for all devices, so screen resolution seems not just simpler but full proof way (as UA can be faked or modified by some wise mobile operator) – CodeVirtuoso Jan 28 '11 at 14:23

5 Answers5

4

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/

user1682943
  • 41
  • 1
3

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.

Jim Amos
  • 289
  • 1
  • 4
1

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.

Dovev Hefetz
  • 21
  • 1
0

It depends on what you want to achieve.

If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.

If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.

You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:

console.log("width: " + screen.width + ", height: " + screen.height);

Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.

You may get away with it if you just want it to mostly work or if you want to detect specific phones.

However it is not reliable to use screen resolution alone to detect the device type.

Jens
  • 5,767
  • 5
  • 54
  • 69
0

Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?

DoctorLouie
  • 2,699
  • 1
  • 18
  • 23