Screen resolution detect and redirect to URL w/ manual switch back

[owlinargyle]

We have a Classic site and a Mobile site. (I know that this is old school, and would better done with two versions of CSS, but this is an old site. Unfortunately, I have to work with what they have until I can convince them to redesign.)

I added a Javascript that would detect the screen size of a mobile device and automatically redirect to our Mobile site. However, we also want to give the user the option to go back to the Classic site. But if you click on that link, it will just keep redirecting you back to the mobile version. Obviously, that won’t do.

I think I found another JavaScript that will do what I need, but it won’t work for me. I’m sure its something simple I’m overlooking. =( …I’ve set it up on [CodePen.](http://codepen.io/downcasteyes/pen/EGrIp “”)

Can someone take a look and point me in the right direction? I’d really appreciate it. Thanks!

[TheDoc]

I think this has to do with cookies more than anything, but that’s something I’ve never dealt with.

[owlinargyle]

We don’t want to affect the user’s cookies. I did read something about using HTML5’s _sessionStorage_ but I don’t fully understand how to make it work for this specific instance.

[owlinargyle]

I found [this](https://github.com/sebarmeli/JS-Redirection-Mobile-Site “this”) , which may work. It’s a little over my head though.

[TheDoc]

Looks like a pretty good solution, actually!

Any reason why you don’t just want to use cookies?

[owlinargyle]

I think we were just trying to stay away from affecting the users’ browser settings. But we may not have any other way around it. I’ve spent the last few days researching, and so far most of the other scripts I’ve found are very similar to this one, though this one seems the most thorough.

[owlinargyle]

Found this [old discussion](https://css-tricks.com/forums/discussion/13960/detect-mobile-and-redirect/p1 “old discussion”) on here too, that’s along the same lines as to what I’m trying to do. Glad to see I’m not the only one faced with this issue. =)

[Kitty Giraudel]

@chriscoyier wrote something about it: https://css-tricks.com/user-opt-out-responsive-design/.

[owlinargyle]

This ended up working great! It redirects the mobile devices to the mobile site perfectly, while allowing the user to click on the classic site link and not get stuck in a loop back to the mobile site. I was also able to modify the script to allow for tablets to not redirect to the mobile site but still bring up the classic site instead.

I’d consider this solved. =)

[toma888]

downcasteyes,

I’m using a basic HTML site and need the code for a mobile redirect as well as let the user click on a link
to view full site.
I’m currently using this code:

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 = "http://dacopywriter.com/mobile-3/index.html&quot;;
}

and it works fine but will not validate in W3C:
(required attribute “type” not specified )

Do you have some clean code that I can just drop into the ?

[Author]

Posts