Redirect to a Mobile Site with .htaccess and Set a Cookie to Break Redirect

Recently mobile websites have become extremely popular and important in the web development world. The days of people having crappy flip phones with no internet or javascript are over. People have quality phones now, so having a mobile optimized website is no longer a luxury but a necessity.

If you’re looking into developing a mobile website for your business or for your client make sure to checkout my mobile website and theme pack “emdot”, available exclusively on ThemeForest. For only $9 you get a fully functioning mobile site with 12 different themes, a validating contact form, a portfolio with mobile touch, an “add to home bubble” for iPhones and iPads, 50+ icons for the navigation, 20 social media icons, and a bunch more. Simply pop in your content and you’re ready to go. Well almost ready to go, the last thing you’re going to need is to redirect people to your new mobile website.

Redirecting people to your mobile website is easy enough by using a .htaccess file. Basically you say “if people visiting my website are on a mobile device send them to http://m.example.com, and if they aren’t on a mobile device send them to http://example.com”. This of course assumes that you setup a subdomain located at “m.example.com”.

After setting this up for a client I realized one problem with this. When setting up your mobile website you should have a link in the footer allowing the user to visit your full website (you most likely have some content on your full website that you don’t have on your mobile website). Your link would look something like this:

<a href="http://example.com">Visit full site</a>

Easy enough, except for one thing.. we redirected the users from the main site to the mobile site. So if they click the “visit full site” link they will be redirected back to the mobile site again.

The solution is to set a cookie which allows you to visit the full site without being redirected. Setting the cookie allows you to go from the mobile site to the full site, and visit any page on the full site once you’re there without being redirected back to the mobile site.

Step 1.

Setup your mobile site at http://m.example.com

Step 2.

Add the following link to your mobile site:

<a href="http://www.example.com?m=0">Full Website</a>

*If you’re using jQuery mobile (such as the emdot theme), you may need to add rel=”external” to your link, like this:

<a rel="external" href="http://www.example.com?m=0">Full Website</a>

Step 3.

Create a .htaccess file (which is just a regular file such as a .txt files renamed .htaccess). Add the following code and replace the 2 domain names. Upload the file to the root of your website. If you already have a .htaccess file simply add this code to the existing file.

*Notes: Make sure you don’t overwrite your existing .htaccess file by accident. This only works on Apache servers.

RewriteEngine on
RewriteBase /

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:www.example.com]

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Can not read and write cookie in same request, must duplicate condition
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 

# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]

# Now redirect to the mobile site
RewriteRule ^ http://m.example.com [R,L]

Credit. I tried a few different scripts to find a solution that worked for me, and the above script was the winner. The original script came from this thread on Stack Overflow.

No iPad

The following appears to work if you want a redirect but don’t want the iPad to be redirected. Code from the link above.

RewriteEngine on
RewriteBase /

# 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|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
    RewriteCond %{HTTP:Profile}       !^$

    # 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.example.com%{REQUEST_URI} [R,L]

The code for the link to the full site with this technique:

<a href="http://www.example.com?mobile=0">Full Website</a>