If you've created a mobile version of your website, you'll need to be sure that you redirect your mobile visitors to your mobile website. For example, if someone visits domain.com on their phone, you'll need a way to redirect them to m.domain.com (the mobile version of your site created on a subdomain called "m").

Redirecting to a mobile version?

If you think about how your redirect actually works, in theory it's quite understandable - "If the user is using a mobile device, redirect them to the mobile version of the site". The problem is that when people visit your website, their web browser does not know whether, "I am a mobile device" or "I am a desktop computer". Instead, the browser introduces itself by providing a "user-agent", which includes the browser name, version, and other information about your operating system.

To redirect a mobile visitor, you'll need to determine if their browser is a web browser on a mobile device or not. You can determine which browser the visitor is using. You can also look at other things such as their screen resolution and whether they accept file types that are common to mobile devices. Below we've listed a few methods you can use to redirect visitors to the mobile version of your website.

Using Plugins to redirect

If you are running a Content Management System (such as WordPress or Joomla), there may be plugins already available that help with handling mobile visitors. The best way to find these plugins is to either search Google or to search the software's website.

Javascript window.location Method

Because mobile phones typically have a small screen width, you can redirect visitors to your mobile site if they have a screen width of less than or equal to 800 pixels. You place this code in the head section of your main website code. That way when your site is visited, the javascript will see the browser width and redirect to the appropriate site

You can use the following code to do this:

<script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://m.domain.com";
  }
  //-->
</script>

Note! While testing this on a SAMSUNG smart phone, the screen resolution varied based upon how the phone was held. To get the best results, you may have to test with various smart phones.

Please keep in mind however that if the user does not have javascript enabled, this will not work.

.htaccess URL rewrite redirects

You can use a .htaccess redirect to transfer visitors based upon the MIME types the browser supports. For example, if the user's browser accepts mime types that include WML (Wireless Markup Language), then most likely it is a mobile device.

The code below should be placed in your .htaccess file:

RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Comments

Post a comment
2013-05-11 1:22 pm
You have just saved my life. I used the Javascript window.location Method but did not place it in the header. I placed it in the article itself and added this as well <script type="text/javascript" src="media/lib/jquery-1.8.2.min.js"></script>. It worked like a charm. It's a joomla site I was building and wanted to redirect users for a single page based on the device they using. You are a star. Thanks
2013-07-05 2:37 pm
This is great, but how can give the user an option to return to the full site, overriding the mobile via a link on the mobile site.
Staff
9,521 Points
2013-07-05 4:19 pm
Hello stephenbrust, and thanks for the question.

It would be a bit tricky to handle a redirection back to the full desktop view of the website. It would really depend on which method you're utilizing, and if you're doing this on a custom coded website, or using a CMS like WordPress or Joomla which would typically use plugins to manage these types of things.

If you have your mobile and desktop sections setup under a different sub-domain then you could use a link on your mobile pages to force the full view to be used. One way to attack this type of issue would be using JavaScript to read the GET variables that are passed, and on your mobile version of the site you could create a link to ?m=no to indicate you'd like to force the full desktop view:

<head>
<title>Title</title>
<script type="text/javascript">
<!--
var getStr = window.location.search.substr(1);
var getArray = getStr.split ("&");
var get = {};

for ( var i = 0; i < getArray.length; i++) {
var tmpArray = getArray[i].split("=");
get[tmpArray[0]] = tmpArray[1];
}

if (get.m == "yes") {
window.location = "http://m.example.com"
}
else if (get.m == "no") {
window.location = "http://www.example.com";
}

//-->
</script>
</head>


Hopefully that can help steer you in the right direction, let us know what software you're using if you'd like a more specific example.

- Jacob
2013-07-17 10:19 pm
JacobIMH couldn't you just make one index page to redirect users to either the mobile site or desktop site and then have links to the second page on each site? (index -> "desktop home" or "Mobile Home" ; then link to those home pages)
Staff
9,521 Points
2013-07-18 3:11 pm
Hello crollur, and thanks for the comment.

I think what you're saying is have a main index page that provides a link to either the desktop or mobile version of the site, and then on both versions of the site include in the menu the ability to jump to the alternative version?

That definitely would be an option, but in the context of this article wouldn't handle the automatic mobile redirection of your visitors via either JavaScript or .htaccess.

Thanks again for adding another option to the mix!

- Jacob
n/a Points
2014-04-12 5:23 am
<script>if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location ="http://m.domain.com";}</script>
Staff
9,521 Points
2014-04-12 10:24 am
Hello Nishanth,

Thanks for sharing that great code snippet! That would be yet another viable option to handle redirects. I just tested it on 2 mobile phones and 2 laptops and it was successful in only redirecting the phones.

It's worth noting that if you accessed a page at example.com/products that had this code, it would take a mobile user that might have clicked on a Google or other link to your website for your products page directly to your main mobile site page.

You could modify the code a bit based on what file it is residing in to keep mobile users on the right pages they were trying to visit. You'd also want to make sure to check if the user is already on the mobile page to prevent a re-direct loop:

example.com/products/index.html
<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
if(document.URL !="http://m.example.com/products")
{
window.location ="http://m.example.com/products";
}
}
</script>


Thanks again for sharing!

- Jacob

n/a Points
2014-05-25 8:04 pm

Hello. Works great except windows phone. What is missing in the code? Thanks

Staff
7,372 Points
2014-05-27 8:27 am
A bit more code needs to be added for Windows Phone. I don't have a Windows device handy to test this with, this this should work:

<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/IEMobile/i.test(navigator.userAgent)){
if(document.URL !="http://m.example.com/products")
{
window.location ="http://m.example.com/products";
}
}
</script>

n/a Points
2014-05-13 12:20 am

You can also use PHP for this.<?php

 

$isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.

                    '|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[\-_]'.

                    '|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );

 

if($isMobile) {

    header('Location: ./index2.php');

}

 

?>

Staff
5,388 Points
2014-05-13 10:51 am
Hi Andrew, so you're saying if any of those regular expressions match, then redirect the user to index2.php ? ... and index2.php would have to be the mobile version of your site?
n/a Points
2014-05-13 10:59 am

Yes! The code needs cleaned up as the formatter here seems to have broken it up a bit, but yes, this works perfectly. It's a snippet I use on a regular basis.

n/a Points
2014-05-15 2:44 am

HI Jacob, could you show a demo for the "get=yes/no" example?

Staff
7,372 Points
2014-05-15 7:42 am
In the code above, the GET variable is being read via JavaScript, but it would just need to be passed within the browser. To do so, you would set your URL to something like the following for non-mobile traffic:

http://example.com/?m=no

n/a Points
2014-06-03 2:42 pm

Thanks, I am using a hybrid of your code and passing back the "yes" variable from my mobile site.

 

<script type="text/javascript"><!--        var getStr = window.location.search.substr(1);        var getArray = getStr.split ("&");        var get = {};        for ( var i = 0; i < getArray.length; i++) {        var tmpArray = getArray[i].split("=");        get[tmpArray[0]] = tmpArray[1];        }       if (get.m == "yes") {                window.location = "http://www.mymainsite.com"        }        else if (screen.width <= 800) {                window.location = "http://mymobilesite.comi";        } //-->  //--></script>

 

then on my mobile site links for the Full Site  I use http://www.mymainsite.com/?m=yes

n/a Points
2014-06-16 11:58 pm

I would recomend just using a php command, the link on the moble site sends you to yoursite.com/?mobile=0

and on your regular site you have:

<?php if ($_GET['mobile'] !== 0) {

echo "JAVASCRIPT HERE";

} ?>

That makes it so the user can go back to the normal site and the javascript will not even be on the page anymore.

n/a Points
2014-07-07 11:54 am

This is probably a dumb question, but in the javascript coding method, do you leave "m.domain.com" or do you have to change it so that the "domain" portion actually reflects your website address?

Staff
15,308 Points
2014-07-07 12:35 pm
Hello Nina,

Yes, the "domain" portion would need to be changed. If for example your domain was "nina.com" the redirect would be to "m.nina.com".

Kindest Regards,
Scott M
n/a Points
2014-07-11 9:44 am

i m designing a website with complete bitmaps....even the background is a bitmap...if i design it in any perticular resolution the user with different resoultion finds the page setup improper...i want to cr8 a redirect link to my website versions in different resolution..plz help

 

Staff
7,372 Points
2014-07-11 10:27 am
Could you provide a link to the website that you are referring to?
Staff
9,521 Points
2014-07-13 3:58 am
Hello amey,

You would want to use what's called responsive web design to detect the visitor's browser resolution, and then you could redirect to the page designed for their resolution.

You could also instead use the CSS @media selector to alter your site as well without doing a browser redirect and just maintaining all the code on one page:


div#res480 { display: none; }
div#res640 { display: none; }

@media only screen and (min-width: 320px) and (max-width: 480px) {
body { font-size: .8em; background-image: url('/support/background-320x480.jpg'); }
div#res480 { display: block; }
}

@media only screen and (min-width: 480px) and (max-width: 640px) {
body { font-size: .8em; background-image: url('/support/background-480x640.jpg'); }
div#res640 { display: block; } }



What is going on above is that you'd place your content for smaller screens in a <div class="res480";> tag for example. Then it starts out hidden along with any other different content sizes you have. Then using the @media selector it asks the browser if the page dimensions that a browser is currently showing are within a certain range and then swaps out the font-size and background-image values if so.

Hope that helps, please let us know if you still had any questions.

- Jacob
n/a Points
2014-07-17 2:40 pm
it was great ! Now www.bisu.co will be mobile

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201633

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!