Отключить fancybox на портативных устройствах

Question

Мне нужно убедиться, что при нажатии на ссылку для просмотра html-файла на iPhone или Android или любом портативном устройстве он не использует Fancybox для его просмотра, как на компьютере.

Я пробовал пути с @media без удачи.

Есть ли код для отключения определенных битов JavaScript в зависимости от того, какое устройство это?

Спасибо!

Answer 1

Решение Андре будет работать для определенного подмножества устройств, но лучшим подходом может быть его применение в зависимости от размера экрана, поскольку, вероятно, именно поэтому вы не хотите использовать facnybox (поскольку экран слишком маленький).

Как насчет этого:

if (window.innerWidth < 500 && window.innerHeight < 500) {

    //small screen device - don't use fancy box
}

Вы можете поменять ширину и высоту на любой порог, чтобы fancybox выглядел нормально.

Answer 2

Для fancybox 2 это работало для меня.

$(".fancybox-img").click( function( e ) {
    if ( window.innerWidth < 799 ) {
        e.stopPropagation();
        e.preventDefault();
    }
})
$(".fancybox-img").fancybox( {
    margin     : 100,
    autoSize   : true,
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Я использую этот подход, и он прекрасно работает для меня ...

if( $(window).width() > 480 && (!navigator.userAgent.match(/Android/i) ||
!navigator.userAgent.match(/webOS/i) ||
!navigator.userAgent.match(/iPhone/i) ||
!navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/))
){
  $(".royalSlide").click().fancybox({
     'overlayShow'  : false,
     'transitionIn' : 'elastic',
     'transitionOut'    : 'elastic'
  });

}

Answer 4

Мышление внутри коробки, без каламбура, решение не от js:

.fancybox-overlay {
    display: none !important;
}

@media (min-width: 1200px) {
    .fancybox-overlay {
        display: block !important;
    }
};

Answer 5

вы можете использовать что-то вроде

if( navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i) ||
 navigator.userAgent.match(/BlackBerry/)
 ){
 // your fancybox instantiation here
}

, но это никогда не будет на 100% точным