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

如何才能在@media screen上运行jqueryfunction？

背景：

我有一个screen.css样式表和一个screen.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

Answer 3

我想你可以使用Modernizr。 虽然，必须有一个本地方式来在javascript中执行它。

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

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

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

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