Блог

Главная - Вопросы по программированию - fancybox iframe width на iPhone отображается шире экрана

fancybox iframe width на iPhone отображается шире экрана

#iphone #iframe #fancybox

#iPhone #iframe #fancybox

Вопрос:

На iPhone у меня возникают проблемы с получением всплывающего окна fancybox (2.1.5) для изменения размера содержимого html в пределах ширины экрана (чтобы пользователю не приходилось прокручивать его по горизонтали).

Я использую метод iframe fancybox для отображения содержимого страницы, когда пользователь нажимает на <a> миниатюру тега. Это действие вызывает fancybox (используя type:iframe) для отображения новой страницы с видео HTML5. Проблема в том, что iframe шире экрана, а содержимое страницы (включая видео) частично отображается за пределами экрана, что требует от пользователя прокрутки по горизонтали вправо, чтобы увидеть всю страницу. Похоже, что fancybox использует сообщенное значение внутренней ширины iPhone вместо значения clientWidth. Обратите внимание, что я включил следующее в заголовок.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Я также попытался включить overlay : {locked : true } метод, который не помогает в этой конкретной проблеме

Вы можете увидеть проблему на http://notheremedia.com Нажмите на первую миниатюру «Cricket Lives» с помощью iPhone.

Любая помощь здесь очень ценится.

Сценарий инициализации Fancybox ниже:

 $(document).ready(function(){
// Fancybox setup call 
    $(".iframe").fancybox({
        width       : '667px',
        openEffect  : 'elastic', 
        openSpeed   : 1000,
        closeEffect : 'elastic', 
        closeSpeed  : 500,
        type        : 'iframe',
        helpers : {
            overlay : {
                locked : true 
            }
        }
    });
});

Комментарии:

1. не могли бы вы опубликовать свой полный сценарий инициализации fancybox на jQuery? (вы не должны просить людей нажимать на неизвестные ссылки …. скорее создайте скрипку, чтобы воспроизвести проблему;)

2. Происходит ли то же самое, если вы открываете страницу с iframe напрямую (не в fancybox) на мобильном устройстве?

3. Приносим извинения за задержку! Моя проблема в том, что у меня нет iPhone, поэтому я краду время у другого. Он отлично работает, переходя непосредственно к ссылке на страницу, другими словами, содержимое страницы умещается в пределах ширины экрана и не прокручивается по горизонтали.

Ответ №1:

Проблема исправлена. Это не проблема с Fancybox. Причина заключалась в том, что я использовал width:inherit элемент управления textarea на странице. Когда я перешел на использование width:100% , iframe FB теперь имеет правильные размеры в пределах ширины экрана. Приносим извинения за ложную тревогу.