[英]Run javascript/jquery only on screen media, not print
如何只在@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.js之类的polyfill
我想你可以使用Modernizr。 虽然,必须有一种本地方式来在javascript中执行此操作。
我从未尝试过,但它是这样的:
if (Modernizr.mq('only screen'))
{
..
}
请注意不支持媒体查询的旧浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.