У меня есть iframe, который отзывчив, но по-разному измеряется на маленьких (мобильных) экранах.На больших экранах это обычный адаптивный iframe, в котором он пропорционально масштабируется для размещения в контейнере с использованием% заполнения.И на меньших экранах контейнер становится высотой 80vh, шириной 100%.В этом случае содержимое iframe имеет свой собственный горизонтальный ползунок (который также в конечном итоге будет контролироваться gryo).
Все отлично работает на браузере настольного компьютера и других устройствах (связка Android), но не на iOS.Iframe по-прежнему правильно заполняет высоту, но не достигает максимальной ширины контейнера.Вместо этого он сохраняет исходные пропорции и становится шире своего контейнера.
Не проще объяснить словами, поэтому:
Снимок экрана на устройстве Android
Снимок экрана на iPhone
Демонстрация в реальном времени
Просмотр его на рабочем столе и изменение размера окна на самом деле делает именно то, что мне нужно, в том числе после того, как вы выходите из строяк меньшему мобильному размеру.Или загрузите его на устройство Android (я использую BrowserStack).Вы заметите, что ширина iframe ограничивается границами контейнера, и вы получаете скроллер внутри iframe.
Но на iOS (iPhone) этого не происходит.Вместо этого iframe просто выходит за пределы контейнера, и родительская страница становится горизонтальной прокруткой.
Любая помощь приветствуется.
ОБНОВЛЕНИЕ: Найдена полу-соответствующий пост, в котором предлагается добавить следующий CSS для элемента iframe
width: 1px; min-width: 100%; *width: 100%;
Это не помогло мне, однако, когда я добавил это к элементу body содержимого iframe(который я также контролирую), это решает проблему.