"VIEW FULL SITE" mobile site option

Question

So I'm working on the mobile version of a site I'm doing, and so far, I'm pulling the mobile sites content from its main counterpart, the main site.

As I study some mobile sites out there, I notice a lot of em have a "view full site" link.

Now I plan on redirecting the mobile visitors via .js in the header tag on main site via a check for screen width etc...(not sure if its the best way but so far the easiest on my brain))(but suggestions also welcome) but something like this

if (screen.width<=XyZ||screen.height<=XyZ) //example iphone size lets say 320x480
window.location.replace("mobile site link here.")

Again I dont know if this is the best way but, on dummy tests, it works on iPhone, some friends Droids, and one Blackberry. But it works.

Anyways, so my question is, if i do this check on every page...how can I possible have a "view full site" option?

Answer 1

Use PHP to detect mobile users through $_SERVER['HTTP_USER_AGENT']. JavaScript detection may not be reliable, because many mobile browsers do not support JS. A "View Full Site" will set a cookie to reject mobile site, which is detectable. Use cookies to keep track of your user's preferences.

In skeleton

<?php

if (isset($_COOKIE['nomobile'])) {
  $style = "normal";
} else {

if (preg_match('/iPhone|(...etc...)/', $_SERVER['HTTP_USER_AGENT'])) {
   $style = "mobile";
} else {
   $style = "normal";
}

}

For the "View Full Site" page:

<a href="fullsite.php">Full Site</a>

fullsite.php

<?php
   setcookie('nomobile', 'true');
   header('Location: index.php');
?>

Answer 2

First, go to the following URL and download the mobile_detect.php file:

http://code.google.com/p/php-mobile-detect/

Next, follow the instructions on the page, and upload the mobile_detect.php to your root directory, Insert the following code on your index or home page:

    <?php
    @include("Mobile_Detect.php");
    $detect = new Mobile_Detect();
    if ($detect->isMobile() && isset($_COOKIE['mobile']))
    {
    $detect = "false";
    }
    elseif ($detect->isMobile())
    {
    header("Location:http://www.yourmobiledirectory.com");
    }
    ?>

You will notice that the above code is checking for a cookie called "mobile", this cookie is set when the mobile device is redirected to the mobile page. To set the cookie insert the following code on your mobile landing page:

    <?php
    setcookie("mobile","m", time()+3600, "/");
    ?>

View the full article at: http://www.squidoo.com/php-mobile-redirect

Answer 3

It's not a best way, because very often JS aren't supported by mobile browsers.

You can use this function:

function its_mobile_browser($user_agent = '')
{
    if (empty($user_agent))
    {
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        if (empty($user_agent)) return false;
    }

    if (stripos($user_agent, 'Explorer')!==false ||
        stripos($user_agent, 'Windows')!==false ||
        stripos($user_agent, 'Win NT')!==false ||
        stripos($user_agent, 'FireFox')!==false ||
        stripos($user_agent, 'linux')!==false ||
        stripos($user_agent, 'unix')!==false ||
        stripos($user_agent, 'Macintosh')!==false
    )
    {
        if (!(stripos($user_agent, 'Opera Mini')!==false
              || stripos($user_agent, 'WAP')!==false
              || stripos($user_agent, 'Mobile')!==false
              || stripos($user_agent, 'Symbian')!==false
              || stripos($user_agent, 'NetFront')!==false
              || stripos($user_agent, ' PPC')!==false
              || stripos($user_agent, 'iPhone')!==false
              || stripos($user_agent, 'Android')!==false
              || stripos($user_agent, 'Nokia')!==false
              || stripos($user_agent, 'Samsung')!==false
              || stripos($user_agent, 'SonyEricsson')!==false
              || stripos($user_agent, 'LG')!==false
              || stripos($user_agent, 'Obigo')!==false
              || stripos($user_agent, 'SEC-SGHX')!==false
              || stripos($user_agent, 'Fly')!==false
              || stripos($user_agent, 'MOT-')!==false
              || stripos($user_agent, 'Motorola')!==false
        )
        ) return false;
    }

    return true;
}

Or something better, lol :)

Answer 4

You can add a query string parameter to your website address such as ?fullsite=true and include the following in your if condition >

var fullsite = getQueryString()["fullsite"];
if (fullsite != "true" && (screen.height <= xyz || screen.width <= abc)) //now redirect

You'll need the following function access query string. I took it from here > JavaScript query string

function getQueryString() {
  var result = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

And in the link you can have >

<a href="mysite.com?fullsite=true"> Show me Full Site </a>

===========

Saying that please take a look at CSS Media Queries. It may require changing a bit of your design architecture but it's pretty useful.

Answer 5

Server-side detection is definitely the way to do this, as you have no guarantee of JS being available or even turned on. A great PHP script for mobile detection is found here http://detectmobilebrowsers.mobi/ and it gets a lot of use around the web.