在小屏幕上禁用 prettyphoto（或任何 href link）

Question

我一直在寻找一种在移动设备或任何其他小屏幕上禁用 prettyphoto lightbox 的方法，在尝试不同的脚本花费数小时后，我发现了一种使用 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(); 
}

会起作用

disable prettyphoto on small screens (or any a href link)