How do I redirect to mobile, but let the user switch from then on?

Question

I am running into a problem with re-directing to my mobile version. I do not have the programming skills to accomplish this. I am stuck.

Here is the code I have below, but first here is the logic I WANT to accomplish:

When a mobile user visits a mobile version is served by default.
If they click the 'View Full Site' then it switches and stays on the full site UNTIL and only IF they click the View Mobile Version (footer) and then it stays on the MOBILE version, unless they click on 'View Full Site' again.

That is it but I cannot get it to work.

Here is the code that I placed in the header:

<script type="text/javascript">
<!--
var fullSiteCookie = readCookie('fullsite');
if ( fullSiteCookie !='t' ) {
  if (screen.width <= 600) {
    window.location = "/m/mobile.html";
  }
  if ( (navigator.userAgent.indexOf('Android') != -1) ) {
    document.location = "/m/mobile.html";
  } 
  if ( (navigator.userAgent.indexOf('iphone') != -1) ) {
    document.location = "/m/mobile.html";
  }
else
  document.location="/";
}
//-->
</script>

Then the hyperlink on the full site is:

<a href="/m/mobile.html" onclick="writeCookie('fullsite', 'm')">View Mobile Site</span></a>

Likewise the mobile site has it's own link:

<a href="../index.php" onClick="writeCookie('fullsite', 't')">FULL SITE VERSION</a>

PROBLEM: I can never get the site to go (the first time) over to the mobile version. It only goes to the full desktop version. That is a show-stopper. It MUST be able to automatically send visitors to the mobile site if they are visiting the site on a mobile device. The should not have to click anything.

Any ideas? I am just not going to be able to figure this out, without help. Of course this is something I need yesterday.

You should do this server-side, otherwise it will fail if JavaScript is unavailable. As for your approach, I'd take a look at the actual values in your if-statements, instead of assuming that they're what you're expecting (`console.log()` is your friend). Also, change your last user-agent to `iPhone`, case-sensitivity matters. — Gary, Aug 24 '14 at 23:13

score 1 · Answer 1 · answered Aug 24 '14 at 23:09

1

Your elseis placed IN the if so it triggers only on the NOT iPhone condition. Try this:

if ( fullSiteCookie !='t' ) {
    if (fullSiteCookie =='m' || screen.width <= 600 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iphone') != -1) {
        window.location = "/m/mobile.html";
    } else {
        // not mobile or forced mobile
        document.location = "/";
    }

} else {
    // forced Normal 
    document.location = "/";
}

answered Aug 24 '14 at 23:09

Stefan Ticu

2,093
1
12
21

This seems to work, but now I am finding it will still not recognize the cookie if it's not been set. That makes it ALWAYS hit the desktop site, not the mobile as expected. Once you get to the mobile site, then going back and forth works fine. What if there was a way to check the referring page, to see if it's from the mobile page? – Nathan Pizzo Aug 26 '14 at 03:08
@NathanPizzo Check the console for errors and also insert `console.log(fullSiteCookie)` right after `readCookie` to see if the value is what you're expecting. – Gary Aug 31 '14 at 21:45

Gary · Answer 2 · 2014-08-31T14:58:11.140

1

Similar to @Loyalty Tech's suggestion, but I have some to add.

var fullSiteCookie = readCookie('fullsite');
  /* Verify that "fullSiteCookie" is a valid value.
     Are you sure the cookie is set the first time?
  */
if ( fullSiteCookie !='t' && 
   (screen.width <= 600 ||
   navigator.userAgent.indexOf('Android') != -1 ||
/* Fix case of "iphone" to "iPhone" */
   navigator.userAgent.indexOf('iPhone') != -1)){
    window.location = "/m/mobile.html";
} else {
  window.location = "/";
}

edited Aug 31 '14 at 14:58

answered Aug 24 '14 at 23:27

Gary

13,303
18
49
71

Yeah, I thought about just commenting on yours, but I had different if-statement preference – Gary Aug 24 '14 at 23:33
Please describe the difference between using window.location= vs. document.location = – Nathan Pizzo Aug 31 '14 at 04:16
That was a mistake, I meant `window.location`. [Here's the difference though](http://stackoverflow.com/questions/7857878/window-location-vs-document-location) – Gary Aug 31 '14 at 14:58
Still have an issue. I simply cannot figure out how to force the site into MOBILE version if you're on a mobile device FIRST TIME - or in a 'incognito' browser session. It's just not going to the mobile by default THE FIRST TIME. After you click to see mobile version or you click back to the desktop version THEN everything works great. – Nathan Pizzo Sep 07 '14 at 15:56
Is there anyway to force the cookie to be set (if on a mobile device) FIRST, then fullSiteCookie will have a value of 'm' and then the mobile site will come up first. – Nathan Pizzo Sep 07 '14 at 15:57
I think this is what is known as a 'Catch 22' – Nathan Pizzo Sep 07 '14 at 16:02
When JavaScript first sets a cookie, it can't read it until the page is reloaded. readCookie needs to return the correct landing page if it has no cookie to read. – Gary Sep 07 '14 at 17:51

How do I redirect to mobile, but let the user switch from then on?

2 Answers2