CODEWITHSUNDEEP
javascriptcssmedia-queries
Damon
Damon

Reputation: 10809

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 up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either through javascript, or potentially loading an additional, generic stylesheet after the mediaqueries that would somehow reset things.

Otherwise I may have to make alternate stylesheets, which would be a pain to maintain, or redesign the page so that the preview area is 100% of the width.

Upvotes: 2

Views: 6951

Answers (3)

EdC
EdC

Reputation: 1165

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;
});

Upvotes: 0

lededje
lededje

Reputation: 1869

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.

Upvotes: 0

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

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.

Upvotes: 5

Related Questions