Collecting screen resolution in web applications

It's true, that usually you don't even need that information. Elements on the page should be designed in a way that dynamically takedifferent resolutions into account. I found it meaningful when designing for a mobile and desktop version of web application at the same time. The code for both is practically the same, maybe only a few PHP lines different, so I figured I will detect whether user is accessing it from mobile device or from desktop computer. Here is when the problem arose: mobile devices have hugeresolutionsnowadays; mobile doesn't equal lame anymore!

Since the screen resolution is a client attribute and PHP runs on server, it is impossible to know it. I remember that in the past one could read such information from HTTP request, but even that was just some non-standard IE header. Nowadays this header seems completely abandoned and other measures are necessary to obtain an information. We have some options left though.

JavaScript is run on client side and can obtain screen size, but this has to be sent back to PHP at some point. You could use HTML form to send it, but that would mean the first page is already drawn in wrong resolution. And besides, the user would need to press some button to send it. To circumvent this user interaction, JavaScript can set a cookie with monitor resolution and then redirect page to itself again via "location" command and thus bringing the resolution back to the server-side script.

JavaScript could also be used to not only detect the resolution, but also to use it. For instance it could decide whether the resolution is good enough for standard web experience or should it be redirected to mobile version. Both of these solutions use redirection, which is sneaky and has a hack feel to it. Some clients might even have automatic redirection disabled, for example by settingnetwork.http.redirection-limit to 0 in Mozilla.

What you can also do is just simply ask a user. You can offer two versions of the site by offering two slightly different URLs, for instance site.com and site.com/mobile. Plenty of internet sites use this approach. Another option is to retain the check if it is a mobile device, and then ask them if they want mobile version and store their preference in a cookie, so that you don't have to bother them again.

You can't guess what is in user's mind. Maybe he likes to squint into full-featured web page on his small screen. Maybe he would prefer less crowded and more functional mobile version in spite of his big mobile screen. Why pushing it one way or another? (What I also like is how this problem started as a technical one and ended as a lesson in the diversity of people :)


Previous: Subversion problems when renaming files and folders
Next: MFC compared to other libraries