Redirect Mobile Devices to Alternate Version of My Site

Redirect mobile devices to alternate version of my site

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.

How can I redirect mobile devices to a different URL?

See this existing question.

You will have better luck doing this server side, as many mobile browsers don't even support JavaScript. Basically you want to check the user agent and compare to a list of known mobile browsers.

How to redirect a single page for mobile devices?

Do I need a plugin to help with this?

Yes, we always need plugins ;)

I use Chriss Schuld's Browser Class^☉ to detect this at PHP level.

_{☉ original and a fork of mine to prevent link rot}

Then, it's just a matter of using template_redirect hook to check for our page, sniff the browser agent and redirect if that's the case:

<?php
/**
 * Plugin Name: Redirect one page for mobile
 * Description: Redirect to Mobile Template Page. Adjust the hardcoded values.
 * Plugin URI:  http://stackoverflow.com/q/19285382
 * Version:     1.0
 * Author:      brasofilo
 * License:     GPLv2 or later
 */

# Download and put the file together with this plugin
# https://raw.github.com/brasofilo/Browser.php/master/lib/Browser.php
if( !class_exists( 'Browser' ) )
    require_once( 'Browser.php' );

add_action( 'template_redirect', 'redirect_so_19285382' );

function redirect_so_19285382() 
{
    # Not our page, bail out
    if( !is_page( 'about' ) ) // <------- adjust
        return;

    # Not mobile, bail out
    if( !browser_check_so_19285382( 'mobile' ) )
        return;

    # It is our page, redirect dude!
    wp_redirect( site_url( 'about-mobile' ) );  // <------- adjust
    exit();
}

# Browswer sniff, create as many cases as you need
function browser_check_so_19285382( $what = '' ) 
{
    $browser_check   = new Browser();
    $browser_info    = $browser_check->getBrowser();
    $browser_version = $browser_check->getVersion();

    switch( $what ) 
    {
        case 'chrome':
            if ( $browser_info == Browser::BROWSER_CHROME ) 
                return true;
            else 
                return false;
        break;
        case 'ie':
            if ( $browser_info == Browser::BROWSER_IE ) 
                return true;
            else 
                return false;
        break;
        case 'mobile': 
            $check_this = array( // <------- adjust the array
                Browser::BROWSER_NOKIA, 
                Browser::BROWSER_NOKIA_S60, 
                Browser::BROWSER_BLACKBERRY, 
                Browser::BROWSER_ANDROID, 
                Browser::BROWSER_IPAD, 
                Browser::BROWSER_IPOD, 
                Browser::BROWSER_IPHONE
            );
            if( in_array( $browser_info, $check_this ) )
                return true;
            else 
                return false;           
        break;
    }
    return false;
}

---

Or using detectmobilebrowsers.com's solution, we use this in the function redirect_so_19285382:

if( is_mobile_detectmobilebrowsers_com() )
{
    wp_redirect( site_url( 'about-mobile' ) );  // <------- adjust
    exit();
}

And add their method:

function is_mobile_detectmobilebrowsers_com()
{
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    return 
        preg_match( '/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $useragent ) 
        || preg_match( '/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr( $useragent,0,4 ) );
}

How redirect to mobile version of site without changing URL?

thanks all of you for commenting my question.
Now that i write my answer to my self , i found my question's answer.

Responsive design not it's answer. You have to show a mobile version of site, not responsive version of site. so using @media()
not useful.

For this issues , You have to detect user's device in your back-end. for example in PHP you can use mobile-detect.
And you can detect your device and show it's template for that device.

---

Also, mobile detect have a js version. click here
I hope you find your answer here.

Detect and redirect to mobile site

This is one of the best module available online,i used the same for my website,it is supported by a major number of mobile devices,many developers has contributed to this repository,might be helpful to you,also it caters for redirection to website through mobile version

Redirection to Mobile Site

Mobile URL Redirect and Desktop URL Redirect

You can use user-agent header sent by the browser to check whether the user is mobile user or desktop user and redirect according to the returned value. You can check user-agent header using this -

var usrAgent = navigator.userAgent;

Now you know the user agent, check the returned user-agent is mobile or not and redirect accordingly -

function detectMobile() 
{
    if(usrAgent.match(/Mobile/i))
    {
        return "Mobile";
    }
}

var isMobile = detectMobile();

if(isMobile)
{
    window.location = "MOBILE_URL";
}
else
{
    window.location = "DESKTOP_URL";
}

Alternatively,

You can use html link tag to redirect to any webpage according to user device width using this -

<link rel="alternate" media="only screen and (max-width: 640px*)" href="MOBILE_URL_TO_REDIRECT">

*Change this width according to your requirement. 640px is the ideal max width for mobile devices.

I hope this solves your problem.

---

Related Topics