问题
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.
回答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.
回答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.
回答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;
});
来源：https://stackoverflow.com/questions/7583441/is-there-any-way-to-disable-media-queries-under-certain-conditions