Redirect mobile devices to alternate version of my site

StackOverflow https://stackoverflow.com/questions/1118581

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 ?

Was it helpful?

Solution

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.

OTHER TIPS

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.

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");
}

I don't think there is a good/elegant way to detect if user has his javascript activated.

IMO, the best is to list the user agent : here is a User-Agent list, which seems quite complete (in French, sadly).

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.

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.

Agreeing with Skaffman, another device database is DeviceAtlas. You have to pay for this one though.

If the device doesn't support JS, it's better to consider a Server-side solution, and WURFL API can help towards that direction.

Sometimes we want to avoid issue with this kind of approach (such as a reverse proxy caches pages and don't let redirect to the mobile version) or we need a quick solution knowing that nowadays almost all recent devices support JS.

For this reason, I wrote a JS script called "redirection_mobile.js" that detects the User Agent of the browser and redirects to the mobile version of your site if you're accessing it from a mobile device.

In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.

You can find the source code on github here http://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

Simple:

<link rel="alternate" media="handheld" href="WEBSITE HERE">

put that in the head section.

here is the working solution

RewriteEngine On
RewriteBase /

#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]

# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]

# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]

# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile}       !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]

RewriteRule ^.*$ index.php [NC,L]
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top