How to manually override CSS @media queries?

Question

I have made a mobile optimised style sheet for a site for a client using:

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css"  />

This works fine but they have requested a link that will show the site with its original, full page format.

Does anyone know a way to re-load the site and override the media query above? Is the only way to do this with JavaScript?

Answer 1

Personally I would favour a solution whereby the stylesheet link is conditionally rendered via some logic in the code behind of the page which is triggered by a user selection. It's not as clean, but you could possibly achieve this by using some javascript too. Maybe along the lines of giving the stylesheet link an id:

<link id="mobilestyles" rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" />

Then calling a function to disable the stylesheet from a button event handler:

jQuery

$("#mobilestyles").remove();

Plain JS

document.mobilestyles[0].disabled = true;

You could then store the user's selection as a cookie and remember this for future visits.

Answer 2

A link is only possible if you have access to the page rendering. I think using a plain link only, it is impossible.

But you can support alternate styles. This makes it possible the user can select in his browser the wanted layout.

Edit: After "BoltClock" noticed that it may lacks on mobile browser support, you can do it anyway and choose the style by javascript. but that's near the answer by "Mel Lota"