rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Redirect iPhone or Android to a Mobile WebSite

I was browsing this website (http://www.bookofzeus.com) on my iPhone the other day and I discover how painful it was to navigate using my mobile device. The next hour, my mobile website was ready but one problem was left to be solved.

How would I redirect traffic from my site to a mobile site with a mobile device?

My first idea was to use Javascript.

//iPhone Version:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	window.location = "http://m.bookofzeus.com/";
}
//Android Version:
if(navigator.userAgent.match(/android/i)) {
	window.location = "http://m.bookofzeus.com/";
}

But then I was thinking that the page has be loaded in order to execute the JavaScript code. Which I wasn't really a fan of this Idea.

Then I was thinking about PHP. Checking the user agent is easy in PHP and this redirection can be done

// iPhone Version:
if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'iPod') !== FALSE)
{
  header('Location: http://m.bookofzeus.com/');
  exit();
}
// Android Version:
if(strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: http://m.bookofzeus.com/');
  exit();
}

This works great, but I realize some of my pages are static. In other words, pure HTML generated code. Which this case, PHP won't work.

So I finally went for the .htaccess solution.

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iphone|ipod|android" [NC]
RewriteCond %{HTTP_HOST} !^m.bookofzeus.com
RewriteRule ^(.*)$ http://m.bookofzeus.com/ [L,R=302]

If you need more mobile devices, here's a quick list you can use:

RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]