jquery - 取决于设备的不同操作（HTML，JQUERY）

Question

我正在制作一个网站，但在 ipad 上滚动fancybox pdf 时遇到了一点问题。为了解决这个问题，当人们在 ipad 上查看我的页面时，我想执行另一个操作，...

这是我的代码

<a href="http://xx.xx/xx.pdf" class="pdf">Open pdf</a>

这是脚本

      <script type="text/javascript">
var isMobile = {
Android: function() {
    return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

$(document).ready(function() {

    $(".pdf").fancybox({
           'type'  : 'iframe',
        openEffect  : 'none',
        closeEffect : 'none',
        iframe : {
            preload: false
        }
    });

    $(".pdf").click(function() {
    if( isMobile.iOS() || isMobile.Android() ){
             e.preventDefault();
            $('.pdf').attr('target', '_blank');
            $(".pdf").removeClass("pdf");
    }
}); 
});
</script>

当我在我的 ipad 上打开网站时，它不会在新选项卡中打开页面，但会保留在花式框中打开的原始操作。有谁能帮助我吗？

Answer 1

如果 iPad 是您要修改的唯一设备，您应该只检测它...

navigator.userAgent.match(/iPad/i)

$(document).ready(function() {
    if (!navigator.userAgent.match(/iPad/i)) {
        $(".pdf").fancybox({
            'type': 'iframe',
            openEffect: 'none',
            closeEffect: 'none',
            iframe: {
                preload: false
            }
        });
    } else {
        $(".pdf").attr("target", "_blank");
    }
});