Switch from Mobile to Desktop using jquery

Question

I'm using this code to direct the users from desktop version to my mobile site.

if (screen.width < 480) {
    document.location = "Path of Mobile Page"
}

i would like to give the users the option to switch back to desktop version (may be using an anchor saying "View Desktop Version") from the mobile website, but this code will redirect them back to mobile site. I was wondering if i can make url to stay for Desktop page after user clicks anchor. My knowledge of jquery is limited so any help would be greatly appreciated.

I guess I'm new, so I wasn't able to make my question clear, so I am explaining it again.

I have two seperate pages, index.html and index1.html, user only knows index.html. When index.html is viewed on mobile device, it redirects to index1.html (so detecting mobile device is not an issue). Now there is a link in index1.html which have href="index.html" but, when I click this link index.html detects its a mobile and again redirects it back to index1.html. This is what I want to avoid, once user clicks the anchor to view index.html, it should not redirect back to index1.html. For first time when users type index.html I've used above mentioned code to redirect it to index1.html

Thanks

The Jquery version for mobile and desktop are completely different, i beleive you need to maintain a different code for mobile and desktop version — dreamweiver, Jan 28 '14 at 14:35

score 1 · Answer 1 · answered Jan 28 '14 at 14:53

You can do this simply by using the userAgent.

 function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i))   {
    return true;
  }
 else {
    return false;
  }
}

If the resolution of window 800x600 or less then it is a mobile device. To perform this you can do as mentioned below.

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
 return true;
   } else {
     return false;
   }
}

Refernce:Detect mobile device

Thanks,

score 0 · Answer 2 · answered Jan 28 '14 at 14:37

0

Since you will have two different paths, just add a button on your Mobile page to redirect the user to the Desktop page. BTW, you can check the navigator rather than the screen width to determine the default page to display.

answered Jan 28 '14 at 14:37

Anthed

139
1
6

When user clicks that button it gets redirected, but again as page loads the jquery gets fired and again, mobile page shows up.. This is what the issue is.. :( – Dinesh T. Jan 28 '14 at 14:43

score 0 · Answer 3 · edited May 23 '17 at 10:25

You may want to look into the following thread on how to detect mobile browsers:

What is the best way to detect a handheld device in jQuery?

In case you do not do a full page redirection, you may need to pass a URL parameter like:

document.location = path + "index.html?mode=desktop";

and check the value so as to detect if user "manually selected" mobile/desktop site:

How to Get Url Parameters & Values using jQuery

Switch from Mobile to Desktop using jquery

3 Answers3