Необычная проблема на iPhone

Question

Кажется, что у Fancy Box есть проблемы с работой на iPhone и iPad.

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

Какие-либо исправления?

Спасибо, C

Answer 1

Fancybox пытается автоматически изменять размеры и центрировать себя каждый раз, когда изменяется размер окна браузера, и это событие часто вызывается на iPad и iPhone. Для причудливого блока 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

Довольно старая проблема, но этот плагин работал на старом сайте. Я заметил, что 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;
           }
        });
});

Answer 4

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

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

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

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

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

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