#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    6
    Rep Power
    0

    Javascript mobile redirect, 'Full site' link on mobile site.


    I'm trying to deploy a small javascript in an existing simple HTML site to redirect mobile visitors to a mobile site, then with a 'Full site' link on the mobile site to allow full site access.

    My original script does not allow mobile access to full site, but redirects perfectly:
    Code:
    <!---------- Mobile Device Redirect ------> <script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "http://www.mob1.domain.com"; } //--> </script>
    The script I'm testing is:
    Code:
    <script> if (document.location.search.indexOf("skipmobile") >= 0) { document.cookie = "skipmobile=1"; } else if ((document.location.hostname.match(/\.mobi$/) || screen.width < 699) && document.cookie.indexOf("skipmobile") == -1) { document.location = "mobile/"; } </script>
    It will not redirect, I have not tested the 'Full site" function.

    Original project source is here: http://ezmobilewebsitetools.com/howto-redirect.html

    Any suggestions appreciated.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    If your going with JavaScript for mobile site detection/redirection (client side detection/redirection); then going with the screen size, might be your best bet, but your probably better off going with a sever side language; for device detection/redirection. If you go with JavaScript; you could also add a link, back to your full site, in your mobile site (lots of sites do this). Just a suggestion.... and... in my opinion; using a sever side language is the best way for this (at least as a back-up); for device detection.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    6
    Rep Power
    0
    Originally Posted by web_loone08
    If your going with JavaScript for mobile site detection/redirection (client side detection/redirection); then going with the screen size, might be your best bet, but your probably better off going with a sever side language; for device detection/redirection. If you go with JavaScript; you could also add a link, back to your full site, in your mobile site (lots of sites do this). Just a suggestion.... and... in my opinion; using a sever side language is the best way for this (at least as a back-up); for device detection.
    I have spent 9 hours today working on this I'm open to suggestions. I have tried to use a couple PHP server-side applications, but can't get any working. Like this http://www.code96wd.com/php-mobile-redirect/.

    These simple ones work, but users can never access to the main site.
    Code:
    <!---------- Mobile Device Redirect function ------> <script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "http://www.mobile.domain.com"; } //--> </script>
    Looks like using cookies, prevents my users from getting right back into the mobile site after the first entry. Only clearing the cookies from the browser allows mobile site reacess, not good.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    PHP Mobile Site Detection - Here's A Server Side Mobile Site Detection Method

    or... using the JavaScript window.screen.width idea and HTML5 sessionStorage (to replace the cookie idea; so the page only redirects once per website/web page session); create a landing page or put the code below, in each of your pages (with an external JavaScript file, of course):

    Code:
    <script>
    var sY = window.screen.width;
    var maxWidth = 699; // max width of mobile devices
    function displaySite()
    {
     if (sessionStorage.getItem("mobile_redirect") != "no") {
      if (sY <= maxWidth) {
       sessionStorage.setItem("mobile_redirect", "no");
       window.location.replace("http://www.mob1.domain.com");
      }
     }
    }
    window.onload = function() {
     displaySite();
    }
    </script>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    6
    Rep Power
    0

    Trying php, without cookie, With Full Site link on mobile browser.


    The trouble with the simple javascript width redirects is they don't allow the mobile access to the Full Site.

    So I'm trying to learn why my PHP tests and scripts in my HTML web pages are ignored. I'd really like to use the below php code in my html pages, it uses a query string URL to allow the mobile to full site without redirect -- without a cookie.

    Code:
    <?php function is_mobile(){ $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|"; $regex_match.="htc|dopod|blazer|netfront|helio|hos in|huawei|novarra|CoolPad|webos|techfaith|palmsour ce|"; $regex_match.="blackberry|alcatel|amoi|ktouch|nexi an|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|ma ui|"; $regex_match.="symbian|smartphone|midp|wap|phone|w indows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|"; $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mob i|opera\*mini|320x320|240x320|176x220"; $regex_match.=")/i"; return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT'])); } switch($_GET['mode']) { case 'mobile': $mode = "mobile"; break; case 'desktop': $mode = "desktop"; break; default: $mode = is_mobile() ? "mobile" : "desktop"; break; } if ($mode == "mobile") { header ("Location: http://www.m.mainsite.com"); return; } ?>
    Mobile web page side to access full site:
    Code:
    <a href="http://www.mainsite.com/?mode=desktop">Full Site</a>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    6
    Rep Power
    0
    I found out that I needed a .htaccess file line on my web server, to allow php code in my html web pages to be recognized.

    This much is working now, but the PHP scripts I'm testing now stop (break) and the web page is not displayed.

    I'll move this to the PHP now I suppose...
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    The trouble with the simple javascript width redirects is they don't allow the mobile access to the Full Site.
    That's why I added HTML5 sessionStorage to the code. This way, it will only redirect once, per browser session. All you would have to do; is put a link back to your full site version, on your mobile site. As I said before, lots of sites do that now. Although, again... in my opinion, PHP is the best way to go for mobile site detection/redirection. So your probably headed in the right direction with your PHP script.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    6
    Rep Power
    0

    Resolved


    Originally Posted by web_loone08
    That's why I added HTML5 sessionStorage to the code. This way, it will only redirect once, per browser session. All you would have to do; is put a link back to your full site version, on your mobile site. As I said before, lots of sites do that now. Although, again... in my opinion, PHP is the best way to go for mobile site detection/redirection. So your probably headed in the right direction with your PHP script.
    I've learned that my PHP redirect scripts were not operating, and causing html page crash because they were not the First Item on the html page. There can be No html tags, references or anything before the php redirect. Amazing.
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo