3

多くの調査とフラストレーションの結果、モバイル デバイスで fancybox を無効にする方法を間違えた可能性があると思います

<script type="text/javascript">
$(document).ready(function() 

{ 
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/))
){
$("a#for_fancybox").fancybox({
'overlayShow'  : false,
'transitionIn' : 'elastic',
'transitionOut'    : 'elastic'
}
else( $("a#for_fancybox").fancybox({ "scrolling": "yes", "centerOnScroll": "yes",        "showCloseButton": true, "height": "95%", "width": "95%", "type": "iframe", "autoScale": true,   "cyclic": true, "overlayOpacity": 0.8, "showNavArrows": false, "titleShow": false, "content":     "<div> n"}

</script>

それは簡単なことであり、誰かが提供できるアドバイスをいただければ幸いです。

*私はプレイを続けてどこかへ行っていますが、スクリプトはまだモバイル上で実行されています. detectmobilebrowser.js の実行を正しく実行したかどうか疑問に思っています (.js ファイルに変換し、サイトのヘッダー ファイルにスクリプト タグを配置します)。

`<script type="text/javascript">
if( !jQuery.browser.mobile){
$(document).ready(function() {
$("#single1").fancybox({
"scrolling": "yes", "centerOnScroll": "yes", "showCloseButton": true, "height": "95%",     "width": "95%", "type": "iframe", "autoScale": true, "cyclic": true, "overlayOpacity": 0.8,     "showNavArrows": false, "titleShow": false, "content": "<div> n" 
});
$("#single2").fancybox({
"scrolling": "yes", "centerOnScroll": "yes", "showCloseButton": true, "height": "95%",     "width": "95%", "type": "iframe", "autoScale": true, "cyclic": true, "overlayOpacity": 0.8,     "showNavArrows": false, "titleShow": false, "content": "<div> n" 
});
});
}
</script>`
4

2 に答える 2

3

私が使用する 1 つの方法は、まだ Fancybox を初期化するため、理想とはほど遠いものですが、モバイル レスポンシブ ビューにのみ表示される要素の可視性をチェックし、クリック バインディングを他のアクションでハイジャックすることです。

例えば：

$('.fancybox').click(function() {
    if($('#mobile').is(':visible')) {
        // do something here
        return false;
    }
});

$('.fancybox').fancybox();

私が言ったように、理想的ではありませんが、ブラウザの検出に頼る必要のない完全に応答性の高い環境で動作します.

于 2013-12-06T01:04:25.447 に答える
0

あなたの条件ステートメントでは、条件がtrueまたはfalse...であるかどうかにかかわらずfancyboxを有効にしているため、コードのロジックを完全に理解しているかどうかはわかりません.APIオプションを間違えていると思いますoverlayShow。ページとファンシーボックスの後ろですが、ファンシーボックス自体にはありません。

とにかく、私はすでにいくつかの実稼働サイトでこのシナリオを実行しており、私のアプローチは、特定の条件が存在するものを無効にするよりも、特定の条件が存在するものを有効にする方がはるかに簡単であるという事実に基づいています。言い換えれば、単純なファンシーボックスをロードしないでください。ifififmobile device

私の推奨方法は、このスクリプトhttp://detectmobilebrowsers.com/を使用してモバイル デバイス (ブラウザー) を検出することです。このページの Apple の iPhone および iPad (タブレット セクション) に関する注意事項に注意してください。

次に、条件ステートメントは次のようになります。

<script type="text/javascript">
 if(!jQuery.browser.mobile){
  jQuery(document).ready(function() {
   alert("not a mobile device, fancybox will be enabled");
   jQuery("a#for_fancybox").fancybox({
    // options here
   }); // fancybox
  }); // ready
 } // if
</script>
于 2012-06-26T17:41:28.030 に答える