Fancybox Problem auf dem iPhone

Question

Fancy-Box scheint Probleme bei der Arbeit am iPhone und iPad zu haben.

Gehen Sie hier http://fancybox.net/blog und klicken Sie auf "5. Anmeldeformular jetzt versuchen" auf der Seite in einem iPhone oder iPad. Das Formular befindet sich nicht in der Mitte und wenn Sie versuchen, Ihre Details einzugeben, bewegt sich die Box über die Seite und macht sie unbrauchbar.

Irgendwelche Korrekturen?

Danke, C

Answer 1

Fancybox versucht Autoskal und Zentrum selbst jedes Mal, dass das Browser-Fenster der Größe verändert wird, und dieses Ereignis wird eine Menge auf iPads und iPhones ausgelöst. Für fancy box 1.3.4, die der Code dieser Linie 608 steuert:

$(window).bind("resize.fb", $fancybox.resize); 

Um das Problem zu beheben, modifizierte ich diesen Teil des fancybox JS, und fügte hinzu, eine andere Option als „resizeOnWindowResize“, die Sie festlegen können, für iPad- und iPhone-Nutzer falsch oder deaktivieren Sie alle zusammen.

if(currentOpts.resizeOnWindowResize) { 
    $(window).bind("resize.fb", $fancybox.resize);  
} 

Sie müssen auch einen Standardwert für diese Option in $ .fn.fancybox.defaults Hash-Karte hinzufügen.

dann beim Aufruf fancybox Sie können diese neue Option nutzen:

$('#fancybox_link').fancybox(${'scrolling': 'no', 
           width: 'auto', 
           height: 'auto', 
           centerOnScroll: false, 
           resizeOnWindowResize : false}); 

Answer 2

In Fancybox 2.0 gibt es eine neue Option, die mir geholfen, diese Scroll-Probleme auf dem iPhone zu lösen:

fixed: false, 

Answer 3

Okay, ich bin neu und nicht sicher, ob das auf allen Geräten funktioniert, aber ich habe es auf meinem iPhone handhabbar. Was ich tat, war die Überprüfung „Titel anzeigen“ in den Medieneinstellungen für die iframe und stellen Sie die Position „innen“

Wenn ich erstellen Sie einen Link oder ein Bild, das ich dies als Titel setzen:

<a href="http://www.fetalscreening.com/nuchal_screening.php" target="_blank"> 
    Click in having trouble with mobile device 
</a> 

Ich weiß, dass dies aus SEO-Gründen von meinen Tags wegnehmen kann, aber es bietet Leuten, die Ihre Seite mit ihrem mobilen Gerät ansehen, die Möglichkeit, in einem neuen Fenster zu klicken und den benötigten Inhalt zu sehen.

Wieder bin ich mir nicht sicher, ob es ein sicherer Weg ist, aber ich habe die letzten 5 Stunden damit verbracht, Posts und FAQs zu lesen, die versuchen, sich etwas einfallen zu lassen.

Es dient meinen Zwecken. Wenn jemand andere Vorschläge hat, bin ich ganz Ohr.

Answer 4

Ein ziemlich altes Problem, aber dieses Plugin lief auf einer alten Seite. Ich habe bemerkt, dass Fancybox dem HTML-Tag die Klasse "fancybox-lock" hinzufügt, indem er ein einfaches JS verwendet, das ich dem BODY hinzugefügt habe und es scheint jetzt in Ordnung zu sein.

Hoffe das hilft jemandem!

JQuery

$(function(){ 
    var fancyboxVisible = false; 
     $(document).on('click', '.fancybox', function() { 
      if(fancyboxVisible) { 
       $('html, body').removeClass('fancybox-lock'); 
       fancyboxVisible = false; 
      } else { 
       $('html, body').addClass('fancybox-lock'); 
       fancyboxVisible = true; 
      } 
     }); 
});