有没有办法在某些条件下禁用媒体查询？

Question

我对主站点以及站点的“预览”使用相同的样式表（不在 iframe 中，因为我需要它是交互式的）。问题是，预览不会占用 100% 的屏幕宽度，因此当媒体查询基于屏幕大小时，页面的行为会很奇怪。不过，我可以将编辑器/预览模式设置为固定宽度，所以我想也许有某种方法可以在某些条件下禁用媒体查询？不过，我不知道如何解决这个问题。通过 javascript，或者可能在媒体查询之后加载一个额外的通用样式表，这会以某种方式重置。

否则我可能不得不制作备用样式表，这将很难维护，或者重新设计页面以使预览区域为 100% 的宽度。

Answer 1

就像添加到 A.Pavlov 的答案（我还不能添加 cmets）：

如果你想使用 JQuery

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

或者如果您想禁用所有媒体查询，请使用 class="mediaSheet" 而不是 ID：

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

Answer 2

将视口元设置为符合媒体查询的特定宽度。

但请确保您正确设置了比例。如果您希望移动设备能够看到桌面版本，我倾向于将其删除。

Answer 3

您有多种选择。

• 首先，您可以禁用“违规”样式表： 使用 <link id="mediaSheet" rel="stylesheet" href="....">，您可以在 onload 处理程序中运行它：document.getElementById("mediaSheet").sheet.disabled = true;。
• 如果您喜欢编码，可以有条件地将此链接添加到最终的 HTML 中。例如。如果使用 GET 参数 ?preview=true 请求页面，则不会生成样式表元素。