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

Question

我怎样才能运行jquery函数@media screen？

背景:

我有一个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();
    }
});

Answer 2

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

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

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