移动到普通网站重定向

Question

I have a CV/Resume site and when a user visits my website and the screen resolution is lower than 960 I redirect him to my mobile site through this JS

    <script type="text/javascript">if (screen.width <= 960) {document.location = mobile.html";}</script>

My question is if the user wants to visit the normal site and hit a link the javascript will run again and it will redirect the user back to the mobile site. One method to solve this problem it could be to duplicate the normal site lets say index.html and index1.html one with the above code and one with no JS but i think this solution is so noobish. Any way to solve this problem? Before you answer please note that i have no access to the .htaccess file.

My problem is when a user visits my site with scree width lower than 960 go to mobile site but if he wants to see the full site press a link and get redirected to the full site no matter the screen width.

Answer 1

Here's a small code snippet. When the user changes from mobile to normal, run the following code:

var expires = new Date();
expires.setHours(expires.getHours + 24); 

document.cookie = (document.cookie ? document.cookie + ' ;' : '')
     + ' disableMobile=1; expires=' + expires.toGMTString();

and then change your redirect condition to

   if (screen.width <= 960 && document.cookie.indexOf('disableMobile') < 0) [...]

Answer 2

Two ways come to mind:

1. Use a cookie, so that the user's preference to stay on the full site will be remembered. Create/set the cookie just before redirecting.
2. Use a query parameter, <a href="index.html?fullsite=true">Full site</a> (or similar), which you set only in the link from mobile.html back to the normal site.

Then add a condition to your existing screen width test so that it only runs if the cookie/query parameter is not set.

(You may also like to add an extra link on your main index page to let the user choose the mobile version. Obviously if you go the cookie route this should clear the cookie.)