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

Question

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

背景:

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

Answer 1

任何脚本都会在页面加载时运行，因此使用 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();
    }
});