0

我正在使用这个插件,成功:

http://www.fancyapps.com/fancybox/

我只是想知道是否有任何方法可以禁用 JS,如果用户在小于 767px 的屏幕上——也就是说,只是链接到图像本身而不提升灯箱?我已经查看了所有类似的问题,但他们的解决方案都没有真正奏效,我也不知道如何实施它们。

如果有帮助,我可以下载并使用 Modernizr...?

4

2 回答 2

1

我不确定您必须支持哪些浏览器,但您可以使用“window.matchMedia”。您可以在此处找到支持的浏览器:http: //caniuse.com/matchmedia

至于在您的情况下如何使用它:

if (window.matchMedia( "(min-width: 767px)" ).matches) {
    // Initialize fancyBox.
}

我没有看到您必须处理屏幕尺寸更改的任何地方,但如果您这样做,您可以添加一个监听器,如下所示:

var mediaQuery = window.matchMedia( "(min-width: 767px)" );
mediaQuery.addListener(handleWidthChanges);
handleWidthChanges(mediaQuery);

function handleWidthChanges(mediaQuery) {
    if (mediaQuery.match) {
        // Do nothing if fancyBox already initialized otherwise disable.
    } else {
        // Disable fancyBox if it's initialized otherwise do nothing.
    }
}

如果您必须支持当前支持“window.matchMedia”的浏览器以外的浏览器,Modernizr 有这个: http: //modernizr.com/docs/#mq,您可以依赖它。

祝你好运!

于 2013-02-15T23:54:38.267 回答
0

刚刚找到了一个纯 CSS 的解决方案:

@media handheld, only screen and (max-width: 540px){
    .fancybox {
        pointer-events: none;
    }
}
于 2021-05-03T15:55:47.117 回答