如何在移动设备上禁用fancybox，让PDF正常下载？

DevOps 小满

2026-7-26

解决fancybox在移动设备上禁用PDF预览、允许下载的问题

为什么你之前的方法无效

移除类名的方式：fancybox在页面初始化时已经完成了事件绑定，后续移除lightbox-image类不会解除已绑定的点击事件，所以lightbox依然会触发。
CSS的pointer-events: none：会让整个链接元素失去点击交互，既无法触发lightbox，也无法触发PDF下载，不符合需求。

有效的解决方案

方案1：根据设备宽度动态初始化/销毁fancybox

这种方法会在页面加载和窗口 resize 时，判断当前设备宽度，仅在非移动设备上启用fancybox：

jQuery(document).ready(function($) {
  // 判断是否为移动设备（宽度<600px）
  const isMobile = () => window.innerWidth < 600;

  // 初始化fancybox的函数
  const initFancybox = () => {
    $('.pdf.lightbox-image').fancybox({
      type: 'pdf', // 指定内容类型为PDF
      // 其他fancybox配置参数
    });
  };

  // 页面首次加载时处理
  if (!isMobile()) {
    initFancybox();
  }

  // 窗口大小改变时重新处理
  $(window).resize(function() {
    // 先销毁所有已绑定的fancybox实例
    $('.pdf').fancybox('destroy');
    
    // 根据当前宽度决定是否重新初始化
    if (!isMobile()) {
      initFancybox();
    }
  });
});

方案2：拦截点击事件，移动设备下跳过fancybox

这种方法保留fancybox的初始化，但在移动设备点击时，阻止fancybox的触发，让浏览器正常处理PDF下载：

jQuery(document).ready(function($) {
  // 正常初始化fancybox
  $('.pdf.lightbox-image').fancybox({
    type: 'pdf'
  });

  // 拦截PDF链接的点击事件
  $('.pdf').on('click', function(e) {
    if (window.innerWidth < 600) {
      // 阻止fancybox捕获该点击事件
      e.stopPropagation();
      // 让浏览器默认处理链接跳转（即下载PDF）
      return true;
    }
  });
});