Проблема с Fancybox на iPhone

Question

Необычная коробка, похоже, имеет проблемы с работой на iPhone и iPad.

Перейдите сюда http://fancybox.net/blog и нажмите «5. Отобразите форму для входа в систему« Попробуйте сейчас »на странице в iPhone или ipad. Форма не является центром, и когда вы пытаетесь ввести свои данные, окно перемещается по странице и делает ее непригодной для использования.

Любые исправления?

Спасибо, C

Answer 1

FancyBox попытка автоматическое изменение размеров и сам каждый центр, что окно браузера изменяется, и это событие сработало много на IPADS и айфонах. Для фантазии поля 1.3.4, код, который контролирует это линия 608:

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

Чтобы устранить эту проблему, я изменил эту часть FancyBox JS, и добавил еще один вариант под названием «resizeOnWindowResize», который вы можете установить для фальшивых для iPad и iPhone пользователей, или просто отключить все вместе.

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

Вы также должны добавить значение по умолчанию для этого параметра в $ .fn.fancybox.defaults хэш-карте.

Тогда при вызове FancyBox вы можете использовать этот новый вариант:

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

Answer 2

В FancyBox 2.0, существует новый вариант, который помог мне решить эту прокрутку проблемы на iPhone:

fixed: false, 

Answer 3

Хорошо, так что я новичок в этом и не уверен, что это будет работать на всех устройствах, но у меня это управляемо на моем iPhone. То, что я проверял «Показывать заголовок» в настройках медиа для фрейма и установить позицию «внутри»

Когда я создаю ссылку или изображение, я ставлю это в качестве названия:

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

Я понимаю, что это может убрать мои теги по причинам SEO, но он предлагает людям, смотрящим на вашу страницу со своим мобильным устройством, способ щелкнуть и просмотреть содержимое, которое вам нужно в новом окне.

Снова я не уверен, что это верный путь огня, но я провел последние 5 часов чтения сообщений и часто задаваемых вопросов, пытаясь что-то придумать.

Он служит моим целям. Если у кого-то есть другие предложения, я все уши.

Answer 4

Довольно старая проблема, но этот плагин работает на старом сайте. Я заметил, что Fancybox добавляет класс «fancybox-lock» в тег HTML, используя некоторые простые JS, которые я добавил в BODY, и теперь он работает нормально.

Надеюсь, это поможет кому-то!

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