Iframe шире, чем на iPhone

У меня есть iframe, который я встраиваю в отзывчивую тему WordPress. Он хорошо выглядит на некоторых мобильных устройствах, но на iPhone iframe немного шире, чем должен, и он выходит из контейнера, поэтому пользователи не могут видеть правую часть iframe (что, вероятно, составляет около 20-30px). Это происходит в портретном режиме - если ориентация установлена на альбомную, она выглядит нормально.

содержимое iframe также реагирует, я использую bootstrap. Также он выглядит нормально при изменении размера настольных браузерах и на мобильных устройствах Android. Так что проблема только с портретной ориентации iPhone.

Я использую это в голове моего iframe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

какие идеи?

спасибо!

8
css iframe ios iphone responsive-design

3 ответов

Mobile Safari, похоже, не распознает атрибуты ширины в iframe, но распознает минимальную ширину.

iframe{
  width: 1px;
  min-width: 100%;
}
8

проблема в том, что mobile Safari игнорирует iframe . Я создал здесь новый вопрос и сам ответил на него решением:Как установить ширину iframe в iOS6?

4

для тега meta попробуйте начать с:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

помните, что содержимое iframe является полностью отдельным документом, поэтому вам нужно дважды проверить детали как на родительской странице WordPress, так и в iframe страница.

удачи!

редактировать
Вы также можете проверить, что это не настройка браузера по умолчанию, используя сброс в вашем WordPress CSS, например 

iframe{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
2