Is there any way to disable media queries under certain conditions?

Question

434.88K viewsSeptember 16, 2022css javascript media-queries

2

Damon September 12, 2022 0 Comments

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.

3 Answers

score 0 · Answer 1 · 2022-09-13T12:58:44+00:00

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.

score 0 · Answer 2 · 2022-09-13T02:36:46+00:00

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

score 4 · Answer 3 · 2022-09-12T11:02:38+00:00

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.