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

问题描述

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

How can I run a jquery function only on @media screen?

背景:

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

I have a screen.css stylesheet and a print.css stylesheet. I have two javascript functions, one of which I do not want to run on the printed version want of the page.

推荐答案

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

Any script would be ran when the page loads, so using if (Modernizr.mq('only screen')) {$('h1').text('media screen');} is pointless as it runs your script while you're on @media screen.

相反，您必须检测到媒体查询是否发生更改，并相应地更改页面.您可以使用 enquire.js 之类的方法轻松进行此操作:

Instead, you have to detect whenever the media query changes, and change the page accordingly. You could use something like enquire.js to do so easily:

// 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();
    }
});

这篇关于仅在屏幕媒体上运行javascript/jquery，而不打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！