如何在移动网站上创建“查看桌面版本”链接，而在解析后又不会循环回到移动版本？

Question

I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.

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

I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.

Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.

thanks in advance for any advice.

Answer 1

This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:

var targetWidth = 980; 

$('#view-full').bind('click', function(){ 
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});

See this link for more clarification.

Answer 2

To detect if link was clicked you can:

• Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
• Use media queries and single skin (see bootstrap)
• Maybe look for more elaborate version to detect mobile ( link )
• Chrome for Android has option to request desktop site ( How to request desktop

Answer 3

I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.

So updated the code on the desktop version of the site to:

var GetDesk = 0; 
var GetDesk = localStorage.getItem('GetDesk');

//check screen size is less than 600
if (screen.width <= 600) {

//check if there's anything in local storage showing the users requested the desktop
            if (GetDesk == 0 ) {    
                window.location = "/mobile.html"; 
            }
          }

then added code to the mobile version of the site to check if the user has previously requested the desktop version:

var GetDesk = localStorage.getItem('GetDesk');  
    if (GetDesk == 1 ) {
        window.location = "/desktop.html";
    }

Then at the bottom of the mobile version added the button:

<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>

As I say, perhaps not the best way but it certainly works and is easy for beginners.