Redirect mobile devices to alternate version of my site

Question

We've got an alternate version of out website ready for mobile devices. The content we serve is different and it works well.

What is the best way to detect which version to serve. We don't have a list of all mobile devices so to use the user-agent header is tricky as we may miss something.

We thought about useing device screen width - but what happens if the mobile device doesnt support javascript. How do we sniff this ?

Solution 1

You could use a device description database (such as WURFL) which will recognise the client device from the request headers. You can then query that database to decide if the device can handle your site (e.g. support javascript, or is the screen big enough) before deciding whether to redirect them to a different site.

You don't mention your environment, but WURFL supplies APIs for Java and PHP, and maybe others as well. If there's no supplied API, you can still use WURFL, but you'll have to parse and process the XML data yourself.

Solution 2

media="handheld" doesn't work with modern smartphones like the iphone which pretend to be a desktop browser (uses the screen media type).

http://detectmobilebrowser.com/ Free & open source, has a comprehensive mobile user-agent checker available in many languages - javascript, php, asp.net, ruby, etc.

Solution 3

If you are looking to redirect to a mobile site using JavaScript, I noticed that WURFL also has a solution for that will allow you to do server side detection with JavaScript.

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

you will be left with a JSON object that looks like:

{
     "complete_device_name":"Apple iPhone 6",
     "is_mobile":true,
     "form_factor":"Smartphone"
}

You can then use this:

if (WURFL.is_mobile === true) {
    window.location.replace("http://stackoverflow.com");
}

Solution 4

Just put this in your header:

<script type="text/javascript">
 <!--
  if (screen.width <= 700) {
  window.location = "http://www.mobile-site.com";
  }
 //-->
</script>

Just about everyone's computer screens are above the threshhold of 700px but this vaule can be changed. There isnt a phone or tablet out there that is above 700px (at least I dont know of any) so all mobile divices will redirect to your mobile site.

Solution 5

An alternative to WURFL is Mobile Detect, a PHP class for detecting:

• Tablet
• Mobile
• iOs
• Android
• Browsers
• And much more

So in case WURFL doesn't do what you need, you can always check this out.

View more solutions

Comments

[Clement Herreman]

Didn't know hat a thing la that exist. Much better than my solution

[mistertodd]

-1 iPhone/iPod Touch, and other smartphones, don't honor the handheld media type. They want to display the regular version of the site: which means you need some other mechanism to detect a mobile browser.

[JKirchartz]

This isn't a detection method, it's a way of semantically telling the browser where to find the mobile site.

[dbreaux]

But it sure would be nice, IMO, if mobile browsers would standardize on honoring markup like this by, say, displaying a dialog asking whether the user wants the mobile version of the site and offering to remember that choice.

[anyeone]

Regular ipad has a resolution 1024x768, ipad retina is twice that. So I'd be wary of relying on this.

[Vijeet Deliwala]

Isn't it bad for SEO as it redirects to detectmobilebrowser.com first?

[JoshuaDavid]

Actually you're supposed to change that part of the code so that it reads firecoding.com instead ;-)

[Martijn]

And as of 2015, this answer is obsolete.

[Daniel C]

@FireCoding that is the sneakiest comment I ever saw :)