Disable fancybox on handhelds

问题

I need to make sure that upon clicking a link to view a html file, on an iPhone or Android or any handheld, it doesn't use Fancybox to view it, as it does on a computer.

I've tried ways with @media with no luck.

Is there any code to disable certain bits of javascript depending on what device it is?

Thanks!

回答1:

Andre's solution will work for a specific subset of devices, but a better approach might be to do it based on screen size, since that's presumably why you don't want to use facnybox (because the screen is too small).

How about this:

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

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

You can swap out the width and height for whatever the threshold is for fancybox looking okay.

回答2:

I am using this approach and it is working fine for me...

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

}

回答3:

For fancybox 2 this worked for me.

$(".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>

回答4:

you can use something like

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
}

but it will never be 100% accurate

回答5:

Thinking inside of the box, no pun intended, a non-js solution:

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

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

来源：https://stackoverflow.com/questions/9016845/disable-fancybox-on-handhelds

标签

javascript

android

iphone

fancybox

handheld