Problema de Fancybox en iPhone

Question

El cuadro de fantasía parece tener problemas para trabajar con iPhone y iPad.

Vaya aquí http://fancybox.net/blog y haga clic en "5. Mostrar formulario de inicio de sesión Inténtelo" en la página de un iPhone o ipad. El formulario no es central y cuando intenta ingresar sus detalles, el cuadro se mueve alrededor de la página y la hace inutilizable.

¿Alguna reparación?

Gracias, C

Answer 1

FancyBox intentos de cambio de tamaño automático y el propio centro que cada vez que la ventana del navegador cambia de tamaño, y este evento se desencadena una gran cantidad en iPads y iPhones. Para caja de lujo 1.3.4, el código que controla esta es la línea 608:

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

Para solucionar el problema, he modificado esta parte de la FancyBox JS, y añadió otra opción llamada "resizeOnWindowResize", que se puede establecer falso para usuarios de iPad y iPhone, o simplemente deshabilitar todos juntos.

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

También debe agregar un valor predeterminado para esta opción en $ .fn.fancybox.defaults hash map.

Entonces, cuando se llama a FancyBox puede utilizar esta nueva opción:

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

Answer 2

En FancyBox 2.0, hay una nueva opción que me ayudó a resolver estos problemas de desplazamiento en el iPhone:

fixed: false, 

Answer 3

Bien, entonces soy nuevo en esto y no estoy seguro si esto funcionará en todos los dispositivos, pero lo tengo manejable en mi iPhone. Lo que hice fue comprobar "Mostrar título" en la configuración de los medios de comunicación para el iframe y configure la posición de "dentro"

Cuando creo un vínculo o una imagen Pongo esto como el título:

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

Me doy cuenta de que esto puede quitarme de mis etiquetas por razones de SEO, pero ofrece a las personas que miran su página con su dispositivo móvil una forma de hacer clic y ver el contenido que necesita en una nueva ventana.

Una vez más, no estoy seguro de si es una forma segura de disparar, pero he pasado las últimas 5 horas leyendo publicaciones y preguntas frecuentes tratando de encontrar algo.

Sirve para mis propósitos. Si alguien tiene otras sugerencias, soy todo oídos.

Answer 4

Un viejo problema, pero tenía este complemento ejecutándose en un sitio antiguo. Me di cuenta de que Fancybox agrega la clase "fancybox-lock" a la etiqueta HTML, usando algunos JS simples. He agregado esto al BODY y parece estar funcionando bien ahora.

Espero que esto ayude a alguien!

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