Есть ли способ отключить медиа-запросы при определенных условиях?

Question

Я использую ту же таблицу стилей для основного сайта, а также для предварительного просмотра сайта (НЕ в iframe, потому что мне нужно, чтобы он был интерактивным). Проблема в том, что предварительный просмотр не занимает 100% ширины экрана, поэтому, когда медиа-запросы основаны на размере экрана, страница ведет себя странно. Я согласен с тем, чтобы сделать режим редактора / предварительного просмотра фиксированной шириной, поэтому я подумал, что, возможно, есть какой-то способ отключить медиа-запросы при определенных условиях? Я не знаю, как подойти к этому, хотя. Либо с помощью javascript, либо, возможно, после загрузки дополнительных общих таблиц стилей после медиазапросов, которые каким-то образом сбрасывают вещи.

В противном случае мне, возможно, придется создавать альтернативные таблицы стилей, которые было бы трудно поддерживать, или переделывать страницу так, чтобы область предварительного просмотра составляла 100% ширины.

Answer 1

У вас есть несколько вариантов.

• Во-первых, вы можете отключить «оскорбительную» таблицу стилей: с помощью <link id="mediaSheet" rel="stylesheet" href="...."> вы можете запустить ее в своем обработчике загрузки: document.getElementById("mediaSheet").sheet.disabled = true;.
• Если вам хочется кодироватьВы можете условно добавить эту ссылку в окончательный HTMLНапример, если страница запрашивается с параметром GET ?preview=true, элемент таблицы стилей не будет создан.

Answer 2

Так же, как добавить к ответу А.Павлова (я пока не могу добавлять комментарии):

Если вы хотите использовать JQuery

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

Или если вы хотите отключить всемедиа-запросы, используйте class = "mediaSheet" вместо ID:

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

Answer 3

Установите мета области просмотра равной определенной ширине, соответствующей медиазапросу.

Убедитесь, что вы правильно настроили масштаб. Я склонен удалить его, если вы хотите, чтобы мобильный телефон мог видеть настольную версию.