通过屏幕分辨率检测移动设备的可靠性如何？

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.

Answer 4

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.

Answer 5

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?