Размер 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;
}

Ответы

Ответ 1

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

В соответствии с предыдущими вопросами о SO это ошибка с iOS 4. Я нашел больше информации здесь: fooobar.com/questions/68537/... iframe на тему обрезания содержимого iOS (iPad)

Ответ 2

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

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

Ответ 3

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

Подробнее здесь.

Ответ 4

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

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