Is There Any Way To Disable Media Queries Under Certain Conditions?

I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take

Solution 1:

You've got a number of options.

• First off, you can disable the "offending" stylesheet: with <link id="mediaSheet" rel="stylesheet" href="....">, you may run this in your onload handler: document.getElementById("mediaSheet").sheet.disabled = true;.
• If you feel like coding, you may add this link to your final HTML conditionally. E.g. if the page is requested with a GET parameter ?preview=true, the stylesheet element will not be generated.

Solution 2:

Set the viewport meta to be a certain width that complies with the media query.

Ensure you have the scale set correctly though. I tend to remove it if you want a mobile to be able to see the desktop version.

Solution 3:

Just like to add to A.Pavlov's answer (I can't add comments yet):

If you want to use JQuery

$('#mediaSheet')[0].sheet.disabled = true

Or if you want to disable all media queries, use class="mediaSheet" instead of ID:

$('.mediaSheet').each(function(){
    $(this)[0].sheet.disabled = true;
});