1

I've a simple JavaScript that check the current screen size in the homepage and decide either to serve user with the current desktop view or redirect to mobile site:

if($(this).width() <= 1024){
  window.location.href = 'http://www.m.website.com';
}

However my mobile site has an option that allow user to switch to desktop view if there are not fond of the mobile site, but how should I do that since the Javascript in my homepage will block any screen that's smaller than 1024?

Thanks for the heads up.

Vincent Chua
  • 969
  • 6
  • 20
  • 41

1 Answers1

2

Your problem required a persistent data storage across the pages, because you don't want to redirect to your mobile version if the user explicit request to see all pages like on Desktop.

One solution to your problem, in order to keep using JavaScript (instead of php, asp.net or other server side tech) is take advantage of a cool HTML5 feature named LocalStorage.

So if the users taps from the mobile version in order to get the Desktop Version, you simple add a element to localstorage (HTML5 feature)

localStorage.setItem("ViewAsDesktopVersion", true);

When you are checking the screen resolution, check first if user wants intentionally view the desk version

if(localStorage.getItem("ViewAsDesktopVersion") == "true") ...

Just take care about something, the "true" value that we save on the localStorage, its saved as string. Do not compare this like a boolean.

Cheers.

Emanuel Gianico
  • 330
  • 6
  • 19
  • 2
    For those who are wondering why "true" == true returns false, Because "true" is converted to NaN, while true is converted to 1. Check this reference http://stackoverflow.com/questions/11363659/why-does-true-true-show-false-in-javascript – Shaik Mahaboob Basha Apr 18 '14 at 05:34
  • @ShaikMahaboobBasha Thanks ! I didn't realize. Have totally sense. – Emanuel Gianico Apr 18 '14 at 05:41