PDF 文档不会在移动设备中的 fancybox 中打开，所以当我在这些设备中单击打开 PDF 时，我不想打开一个空白的 fancybox

Posted 2023-05-09

【中文标题】PDF 文档不会在移动设备中的 fancybox 中打开，所以当我在这些设备中单击打开 PDF 时，我不想打开一个空白的 fancybox

【英文标题】：PDF documents don't open inside fancybox in mobile devices, so I don't want to open a blank fancybox when I click to open PDFs in these devices

【发布时间】：2014-10-28 13:21:36

【问题描述】：

我正在使用 fancybox 打开 PDF。它在台式机上运行良好，但在移动设备和平板电脑上，fancybox 无法打开 PDF。

而且我已经做了一些研究，看来fancybox 肯定不能在移动设备上运行。

所以我想知道只有当我的网站被台式机或笔记本电脑访问时，是否可以在我的链接中显示我的“class="fancybox_pdf"。

<a class="fancybox_pdf" href="<?php echo BASE.'/documents/pdfs/test1.pdf'?>">Link for pdf</a>

在移动设备上，我不想在fancybox 中打开我的PDF 文档，因为它不起作用，所以我也不想打开一个正在发生的空白fancybox。

你知道是否可以这样做吗？

我尝试使用 CSS，例如：

<a class="fancybox_pdf" href="<?php echo BASE.'/documents/pdfs/test1.pdf'?>">Link for pdf</a>
<a  href="<?php echo BASE.'/documents/pdfs/test1.pdf'?>">Link for pdf</a>

@media screen and (min-width:981px)  .fancybox_pdf:display:none;

但这不行.

这是我的链接：

<a class="fancybox_pdf" href="<?php echo BASE.'/documents/pdfs/test1.pdf'?>">Link for pdf</a>

还有我的脚本：

$(".fancybox_pdf").fancybox(
    width: '80%',
    height: '80%',
    autoSize: false,
    type: 'iframe',
    iframe: 
        preload: false
    ,
);

【参考方案1】：

我要做的是为链接分配一个不同的 class，这样我就可以独立于 class fancybox_pdf 像

一样操作它

<a class="pdf" href="<?php echo BASE.'/documents/pdfs/test1.pdf'?>">Link for pdf</a>

然后验证您是否使用移动设备（以及屏幕width 可选）并相应地添加或删除类 fancybox_pdf，如下所示：

// detect mobile devices by features
var isTouchSupported = 'ontouchstart' in window,
isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null,
_isMobile = (isTouchSupported || isTouchSupportedIE10) ? true : false;

jQuery(document).ready(function ($) 
    // optionally validates screen width
    if (_isMobile && jQuery(window).innerWidth() < 768) 
        // mobile devices most likely
        if (jQuery(".pdf").hasClass("fancybox_pdf")) 
            jQuery(".pdf").removeClass("fancybox_pdf");
        ;
     else 
        // desktop devices most likely
        if (!jQuery(".pdf").hasClass("fancybox_pdf")) 
            jQuery(".pdf").addClass("fancybox_pdf");
        ;
    ;
); // ready

见JSFIDDLE

注意：你仍然需要保留你的脚本

$(".fancybox_pdf").fancybox();