0

我需要确保在单击链接以查看 html 文件时，在 iPhone 或 Android 或任何手持设备上，它不会像在计算机上那样使用 Fancybox 来查看它。

我已经尝试过使用@media 的方法，但没有成功。

是否有任何代码可以根据它是什么设备来禁用某些 javascript 位？

谢谢！

4

6 回答 6

4

Andre 的解决方案适用于特定的设备子集，但更好的方法可能是根据屏幕尺寸来做，因为这可能是您不想使用 facnybox 的原因（因为屏幕太小）。

这个怎么样：

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

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

您可以将宽度和高度换成看起来不错的花式框的任何阈值。

于 2012-01-26T11:10:04.980 回答
1

对于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>

于 2015-02-11T18:07:12.810 回答
1

我正在使用这种方法，它对我来说效果很好......

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

}

于 2012-05-10T10:39:41.287 回答
0

你可以使用类似的东西

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% 准确

于 2012-01-26T10:50:04.177 回答
0

在盒子里思考，没有双关语，一个非 js 解决方案：

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

@media (min-width: 1200px) {
    .fancybox-overlay {
        display: block !important;
    }
};
于 2013-03-21T20:23:11.207 回答
0

禁用具有屏幕大小的fancybox

@media (min-width: 1000px) {
.fancybox-is-open {
    display: none !important;
}};
于 2021-06-08T17:13:05.927 回答