Question

I’m using CSS media queries to create a responsive theme. I want to add a link at the footer of the website labeled “GO TO DESKTOP WEBSITE”. This link will specifically be displayed on the mobile devices. How can I do it so that when a visitor click on the desktop website link, the website is loaded with desktop media query, not of mobile. I hope I’ve made myself pretty clear on my issue. I’ve searched on Google for the solution but can not find anything related.

Answer 1

You unload your responsive.css file using:

document.getElementsByTagName('link')[0].disabled = true;

for example you might have:

<link rel="stylesheet" href="base.css" type="text/css" id="css_base" />
<link rel="stylesheet" href="responsive.css" type="text/css" id="css_responsive" />

then you can have:

<a href="#" class="hidden-desktop" id="site_view">Show Full site</a>

$("#site_view").click(function() { 
   $("#css_responsive").prop("disabled", true); 
});

Here’s a quick example: http://jsbin.com/elukab/1 (just minimize the browser window)

---

or

you can redirect the user to a new URL where you specify that you want the mobile version off, for example:

$("#site_view").click(function() { 
   document.location = document.location.href + '?mobile=off';
});

and with your dynamic language, just read the query string and don’t load the responsive styles, as I’m a .NET developer, I would do:

<link rel="stylesheet" href="base.css" id="css_base" />
@if(Request["mobile"] == null || Request["mobile"] != "off") {
    <link rel="stylesheet" href="responsive.css" id="css_responsive" />
}