css - 在小屏幕上禁用 prettyphoto(或任何 href 链接)

Question

我一直在寻找一种方法来禁用移动设备或任何其他小屏幕上的 prettyphoto 灯箱，并且在尝试不同的脚本花费数小时后，我发现了一种使用 css 媒体查询来实现这一点的非常简单的方法:

html

<div>
    <a class="lightbox" rel="prettyPhoto" href="img.jpg">
        <img src="img.jpg">
    </a>
</div>

CSS

@media all and (max-width: 479px) {
    a.lightbox {    
        pointer-events: none;
    }
}

但是，我只是想知道是否有更好(正确？)的方法？使用 JS 函数 ($(window).width() ) 更好吗？我想确保它能在任何设备上运行。谢谢。

Answer 1

只需将它包裹起来:

if ($(window).width() >= 768) { 
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
}

会起作用