Как я могу заставить iframe работать как на настольных/переносных компьютерах, так и на мобильных устройствах?

Question

Моего сайта www.familyhistoryconferencenwa.org

У меня есть MacBook Air, в iPhone 5 и IPad Air, так что я фраза это для прошивки 8.1.1, но очевидно, что я хочу, чтобы решение работать для всех планшетов и смартфонов на все платформы.

На странице «Расписание занятий» на сайте у меня есть iframe, который корректно работает на моем MacBookAir, работающем под управлением OS X Yosemite (10.1.1), но на моем iPad Air и iPhone 5, работающем под управлением iOS 8.1.1, отображается ширина рамки ненадлежащим образом. Он простирается справа от правого края страницы. Если вы посещаете сайт на рабочем столе или ноутбуке, а затем на мобильном устройстве, вы должны увидеть, что я имею в виду.

Мой вопрос: какой код я использую для правильного отображения iframe на мобильных устройствах?

Соответствующий код:

<div style="text-align: center"> 
<iframe src="url"; frame-border="1"; height="600px"; width="100%"> 
</iframe> 
</div> 

Как я уже говорил, этот код работает правильно на MacBook Air. IFrame занимает ширину страницы. Но на iPhone и iPad рамка выходит за пределы правой границы страницы. Что я делаю не так? (Кстати, если я устанавливаю высоту на 100%, я необъяснимо получаю раму высотой около 200 пикселей, хотя исходный документ занимает 600 пикселей, чтобы просмотреть все его.)

Я консультировался с двумя текстами по кодированию HTML, искал другие форумы в Интернете и искали этот сайт для ответа на подобные вопросы, но им не повезло. Я видел элемент «Iframe на мобильных устройствах проблематично» на этом сайте, но я действительно надеюсь, что я не застрял с этим для ответа.

Любая помощь будет принята с благодарностью.

Благодаря

Стив

Answer 1

Лучший отзывчивым код IFrame я придумал до сих пор является:

// HTML:

<div class="iframe-container iframe-container-for-wxh-500x350" 
style="-webkit-overflow-scrolling: touch; overflow: auto;"> 

<iframe src="http://urlToTargetSite.com"> 

    <p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is 
    iframe content here but your browser version does not support 
    iframes.</em> Please update your browser to its current version 
    and try again.</p> 

</iframe> 

</div> 

// CSS:

.iframe-container { 
    position: relative; 
    margin: 5px; 
    height: 0; 
    overflow: hidden; 
} 

.iframe-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    border: 1px solid #7a8b8b; 
    /* put following styles (necessary for overflow and 
    scrolling handling) in div container around iframe 
    because not stable in CSS 
    -webkit-overflow-scrolling: touch; 
    overflow: auto; */ 
} 

.iframe-container-for-wxh-500x350 { 
    padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */ 
} 

Обоснование кода приведено в How To Make Responsive Iframes -- It's Easy!

Есть три основные моменты:

1. Набор NO атрибуты в открытии IFrame тега, в частности не ширину и высоту.
2. Поместите контейнер div вокруг iframe и используйте CSS height: 0;, а затем padding-bottom: nn%;, чтобы дать контейнеру высоту, равную отношению высоты: ширины, выраженному в процентах.
3. Стиль div inline с -webkit-overflow-scrolling: touch; и переполнение: авто;, которые необходимы для обработки прокрутки и переполнения на мобильных устройствах и нестабильны в CSS.