仅在屏幕媒体上运行 javascript/jquery，而不是打印答案

【问题标题】：Run javascript/jquery only on screen media, not print仅在屏幕媒体上运行 javascript/jquery，而不是打印
【发布时间】：2012-08-20 04:28:28
【问题描述】：

如何仅在@media screen 上运行 jquery 函数？

背景：

我有一个screen.css 样式表和一个print.css 样式表。我有两个 javascript 函数，其中一个 我不想在打印版上运行想要的页面。

【问题讨论】：

澄清一下：我正在打印为 PDF，因为我目前无法使用物理打印机。不过，我需要将其应用于硬拷贝和 PDF 打印输出。

标签： javascript jquery printing media-queries

【解决方案1】：

在最新的浏览器中你可以使用matchesMedia：

if (window.matchMedia("screen").matches) {
    ....
}

如果你也想支持旧版浏览器，你可以使用像 matchMedia.js 这样的 polyfill

【讨论】：

优雅，但是，我的脚本似乎仍然适用于打印（打印到 PDF）。在 Mac 上使用 Chrome 21、Firefox 11、Safari 6。

【解决方案2】：

我认为您可以使用 Modernizr。虽然，在 javascript 中必须有一种本地方式。

http://modernizr.com/docs/#mq

我从未尝试过，但它是这样的：

if (Modernizr.mq('only screen'))
{
..
}

注意不支持媒体查询的旧浏览器。

【讨论】：

谢谢，我尝试了你的建议，但我的脚本似乎仍然适用于打印（打印到 PDF）。在 Mac 上使用 Chrome 21、Firefox 11、Safari 6。
你是说这个：Modernizr.mq('only screen') 返回 true 并在打印之前执行你的代码？
是的，if (Modernizr.mq('only screen')) {$('h1').text('media screen');} 在浏览器视口和 PDF 打印输出中都给了我“媒体屏幕”。
实际上，我不认为它返回了 true。它会给我的<html> 标签带来什么类？

【解决方案3】：

任何脚本都会在页面加载时运行，因此使用if (Modernizr.mq('only screen')) {$('h1').text('media screen');} 是毫无意义的，因为它运行你的脚本而你在@media screen。

相反，您必须检测媒体查询何时发生变化，并相应地更改页面。你可以使用enquire.js 之类的东西来轻松做到这一点：

// This is just an example, be more creative!

enquire.register("screen", {
    match: function() { 
        $('#only-show-on-screen').show();
    },
    unmatch: function() {
        $('#only-show-on-screen').hide();
    }
});

【讨论】：

这是真正的答案。所有其他答案（迄今为止）都希望页面在打印时重新加载，但事实并非如此。为屏幕版本所做的任何 DOM 更改都会保留在打印版本上。
我已经更新了我的答案以使其更清晰，以及如何使用 enquire.js 来完成。