размер iframe с CSS на iOS

Есть iframe, который в основном имеет больше контента, чем вписывается в фрейм. Размер рамки основывается на размере экрана браузера и позволяет прокручивать переполнения, что отлично работает во всех браузерах, кроме iOS. В iOS сафари решает изменить размер кадра для соответствия содержимому. Не то, что вы ожидаете.

Пример кода на jsFiddle:
http://jsfiddle.net/R3PKB/2/

Попробуйте на устройствах iOS:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<div class="frame_holder"> <iframe class="my_frame"> // The content </iframe> </div> 

CSS:

 body { position: relative; background: #f0f0f0; } .frame_holder { position: absolute; top: 50px; bottom: 50px; left: 50px; right: 50px; background: #ffffff; } .my_frame { width: 100%; height: 100%; border: 1px solid #e0e0e0; } 

Вы можете заставить его работать, добавив обертку div с overflow: auto; и -webkit-overflow-scrolling:touch; , Вот ваш пример: http://jsfiddle.net/R3PKB/7/

Согласно предыдущим вопросам о SO, это ошибка с IOS 4. Я нашел больше информации здесь: https://stackoverflow.com/a/6721310/1047398 iframe на тему обрезания контента iOS (iPad)

Это старый вопрос, но поскольку он на первом месте в google, и проблема существует на современных устройствах ios, я отправляю лучшее исправление, которое я нашел на этой странице: Как заставить IFrame реагировать на iOS Safari?

В принципе, если у вас есть iframe с прокруткой ( скажем, виджет Twitter ), решение выше не будет работать очень хорошо, потому что это делает родительский прокручиваемый. Исправление, которое сработало для меня, заменяет height: 100% с height: 1px; min-height: 100%; height: 1px; min-height: 100%; ,

Если iOS Safari отображает ваше содержимое iframe с другого происхождения, чем ожидалось (т.е. оно сдвинуто на несколько пикселей), попробуйте добавить scrolling="no" в качестве атрибута iframe. Это должно препятствовать автоматическому подбору содержимого.

Больше здесь.

используя height: 1px; min-height: 100%; height: 1px; min-height: 100%; не работал для меня, хотя мне не нужен элемент прокрутки. Мне пришлось использовать overflow:auto; на окружающем div . Обратите внимание, что этот метод не рекомендуется, так как он может иметь непреднамеренные последствия, но я тестировал Android / iOS и настольные браузеры и не мог найти никаких проблем. пальцы скрещены .

Это хороший пост от Энди Шоры по некоторым нюансам iOS iframe : http://andyshora.com/iframes-responsive-web-apps-tips.html

Interesting Posts

Должен ли я использовать один сертификат распространения iOS для подписывания различных приложений?

iPhone SDK: проверьте, отображается ли UIAlertView

Как получить кнопку «Готово» или «Назад» в EKEventViewController, если нет панели навигации?

UIStackView – равномерно распределяет представления из центра

UIVisualEffectView исчезает после добавления subview

Как обрезать изображение внутри круга в UIImageView в iOS

Как декодировать рекламные данные BLE

Рейтинг игрового центра – «20 очков» вместо «20 очков»

Удаление приложения из устройства iOS через командную строку

Отключить оповещение о соединении (возможность подключения Multipeer)

Как «Редактировать версию» в Xcode 4?

*** – : индекс 0 за пределами для пустого массива. При нажатии на контроллер навигации

Добавление изображения в ячейку таблицы (iOS)

Сохранение учетной записи Twitter в iOS 5?

Как сделать нижнюю панель с точками полупрозрачного UIPageViewController?

Давайте будем гением компьютера.