Problema di Fancybox su iPhone

Question

La scatola di fantasia sembra avere problemi con iPhone e iPad.

Andare qui http://fancybox.net/blog e fare clic su "5. Visualizza modulo di accesso Prova ora" sulla pagina in un iPhone o iPad. Il modulo non è centrato e quando cerchi di inserire i tuoi dettagli la casella si sposta sulla pagina e la rende inutilizzabile.

Eventuali correzioni?

Grazie, C

Answer 1

Fancybox tenta di ridimensionamento automatico e centro stesso ogni volta che la finestra del browser viene ridimensionata, e questo evento viene attivato un sacco su iPad e iPhone. Per casella di fantasia 1.3.4, il codice che controlla questa è la linea 608:

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

Per risolvere il problema, ho modificato questa parte del fancybox JS, e ha aggiunto un'altra opzione chiamata "resizeOnWindowResize", che è possibile impostare falso per utenti iPad e iPhone, o semplicemente disabilitare tutti insieme.

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

È inoltre necessario aggiungere un valore predefinito per questa opzione nella mappa hash $ .fn.fancybox.defaults.

Poi, quando si chiama fancybox è possibile utilizzare questa nuova opzione:

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

Answer 2

In Fancybox 2.0, v'è una nuova opzione che mi ha aiutato a risolvere questi problemi di scorrimento su iPhone:

fixed: false, 

Answer 3

Ok, quindi sono nuovo di questo e non sono sicuro che funzioni su tutti i dispositivi, ma è gestibile sul mio iPhone. Quello che ho fatto è stato il controllo "Mostra titolo" nelle impostazioni dei supporti per l'iframe e impostare la posizione di "dentro"

Quando creo un collegamento o un'immagine ho messo questo come titolo:

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

Mi rendo conto che questo potrebbe portare via dai miei tag per ragioni SEO, ma offre alle persone che guardano la tua pagina con il loro dispositivo mobile un modo per fare clic e visualizzare il contenuto che ti serve in una nuova finestra.

Ancora una volta non sono sicuro che sia un modo sicuro, ma ho passato le ultime 5 ore a leggere post e domande frequenti cercando di trovare qualcosa.

Serve ai miei scopi. Se qualcuno ha altri suggerimenti, sono tutto orecchie.

Answer 4

Piuttosto un vecchio problema, ma questo plugin era in esecuzione su un vecchio sito. Ho notato che Fancybox aggiunge la classe "fancybox-lock" al tag HTML, usando un semplice JS che ho aggiunto al BODY e sembra che funzioni correttamente ora.

Spero che questo aiuti qualcuno!

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