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

Существует iframe, который в основном имеет больше контента, чем вставляется в рамку. Размер рамки основывается на размере экрана браузера и позволяет прокручивать переполнения, что отлично работает во всех браузерах, кроме iOS. В iOS сафари решает изменить размер кадра для соответствия содержимому. Не то, что вы ожидаете.размер iframe с CSS на 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; 
}

источник

2013-06-05 Guido Bouman

Упрощенный от меня для вашего четкого анализа этой проблемы. – Garavani

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

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

источник

2013-06-05 12:26:04 nvreez

Ничего себе! Это определенно самое близкое решение, которое я видел на сегодняшний день. Но реализация немного сложнее и не позволяет iframe быть больше, чем предполагаемый размер. –

Можете ли вы объяснить больше, что вы имеете в виду и как мы можем вам помочь? Каков предполагаемый размер, экранирование с заполнением 50 пикселей? (например, то, что вы используете в примере) – nvreez

Отмечено как ответ, потому что нет другого решения из-за ошибки/функции безопасности в iOS. –

Это старый вопрос, но поскольку речь идет о первом на Google и существует проблема по ныне Ios устройств, я перепечатывать лучше исправить, что я нашел на этой странице: How to get an IFrame to be responsive in iOS Safari?

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

источник

2015-03-17 16:28:54

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

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

источник

2015-07-09 18:55:47 Chrispy

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

Подробнее here.

источник

2016-02-17 20:34:27

После 2 часов поиска подходящего решения .. этот вопрос исправил мою проблему! Спасибо! – udidu

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

ответ

Смежные вопросы