Why do different phones / platforms respond differently to mobile sites?

March 22, 2013 4:48 PM

When businesses make mobile 'friendly' sites, is there a consistent rule of thumb for detecting mobile devices, and behaving appropriately?

For example, I'm looking at one site on an iPhone and a Lumia 920 (Windows 8). On the former, it presents a much simpler site, clearly optimised for mobile use, and on the latter it just presents the usual site.

I'm aware there's some sharing of device information, and also aware that you can make a 'responsive' site which is smarter about how to behaves in different screen sizes, but I wondered if anyone could suggest why you might have a site which detects and deals with the iPhone but not the Lumia / Windows 8 ...

posted by lucullus to Computers & Internet (6 answers total)

They have a whitelist of mobile browser user agents and the iPhone is on it but the Windows Phone isn't. That's usually the case. You have discovered the problem with explicit mobile browser UA whitelists - new devices.
posted by GuyZero at 4:50 PM on March 22, 2013

Also, the more capable the browser, the less likely the site will send you to their mobile site. When I upgraded Blackberries, I found that a bunch of sites that used to go mobile are now presenting their standard site.

In addition to the user agent, I think there is a way to query the browser to find out the number of pixels available. If the screen is wide enough, they can present the normal site.
posted by gjc at 5:01 PM on March 22, 2013

Responsive web design is the new thing on the block, it's designing for mobile, tablets, small screens, large screens, etc. without the cludgy user-agent (which can be spoofed anyhow!) snugging.
posted by Brian Puccio at 5:12 PM on March 22, 2013 [1 favorite]

When your device makes a request, it sends a HTTP header such as:

User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

Believe it or not, it's common practice to write code that's as primitive as "if User-Agent contains the string 'iPhone' or 'iPad' then redirect to mobile site". This works because the iPhone User-Agent header looks something like:

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

Yes, it's an incredibly blunt and stupid test, but it also happens to work, and web developers are known for using the first thing that works. There is a careful dance around constructing a User-Agent string that is descriptive but which still matches these blunt tests. If you can believe it, Mozilla actually encourages detecting a mobile device by looking for the string "Mobi" in the User-Agent, which would catch both of the above. They are currently having a lot of headaches because a lot of sites look for the string "Android" to check for a mobile device, and their new Firefox OS (informally named Boot to Gecko/B2G) doesn't contain that string in the User-Agent even though it's running on Android devices; it was a strategic decision to use a UA without that string.

Anyway, the summary is that web development is a toxic swamp built around quick hacks.
posted by Rhomboid at 11:19 PM on March 22, 2013 [1 favorite]

Hi Lucullus, I have a 920 myself - the main differentiator is the setting in IE for whether it requests the mobile or desktop version of the website
posted by eb98jdb at 7:07 AM on March 23, 2013

A more robust and scalable way is to use server-side detection with a library like WURFL Cloud and doing Responsive Design + Server Side Components (RESS) to deliver different templates and content to mobile devices. You can detect specific devices, but best practice is to test for different capabilities.

With responsive design you're delivering the same HTML, CSS, JavaScript, and images to all devices; with RESS you're only delivering content that's optimized for the device.
posted by kirkaracha at 11:59 AM on March 23, 2013