PDF文档don'；不要在移动设备中打开fancybox内部，所以我不会；当我点击打开这些设备中的PDF时，我不想 - 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

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

我正在使用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;}}

但它不太好用，因为我有一个媒体查询，既可以查询笔记本电脑，也可以查询平板电脑，我只是不想在移动设备上的fancybox中打开我的PDF，对于我想打开的笔记本电脑，因为它很好用。

这是我的链接：

<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
    },
});

我要做的是为链接分配一个不同的类，这样我就可以像一样独立于类别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();