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

Run javascript/jquery only on screen media, not print

本文关键字：jquery 打印 javascript 屏幕 媒体 运行      更新时间：2023-09-26

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

背景：

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

任何

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

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

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

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

我认为你可以使用Modernizr。虽然，在javascript中必须有一种本机方法。

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

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

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

当心不支持媒体查询的旧浏览器。

相关文章：