IFrame шире, чем весь экран на iPhone 6

Мог бы действительно использовать помощь на этом.

Я пытаюсь открыть iFrame на своем сайте, который должен охватывать весь экран. К сожалению, в iPhone 6 и выше его ширина фактически больше. У нас есть широкий div рядом с iframe. Когда я удаляю его, все в порядке. Разметка и стили довольно прямолинейны:

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>

Android работает нормально.

Я не мог найти ни одного ресурса в Интернете с этой проблемой.

Пожалуйста, помогите. Спасибо заранее.

Ответ 1

Существует два способа достижения вашего решения.

1. Просто оберните свой iframe в div с помощью

overflow: auto; -webkit-overflow-scrolling: touch;

Вот ваш пример: http://jsfiddle.net/R3PKB/7/

2. Или вы можете попробовать это с помощью css:

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

Если вы установите ширину ниже ширины портрета и установите минимальную ширину на 100%, вы получите ширину: 100%, но на этот раз версия, которая действительно работает, и теперь iframe принимает фактическую ширину контейнера а не ширины ландшафта. Ширина *: 100%; существует так, что в IE6 ширина будет равна 100%.

Однако это работает только с прокруткой атрибута iframe = "no", если прокрутка разрешена, то она больше не работает. Таким образом, это может ограничить его полезность в некоторых случаях.

Вот ссылка для более подробного ответа

Ответ 2

Я иногда сталкиваюсь с аналогичными проблемами в мобильных браузерах. Существуют некоторые ключевые отличия в том, как разные браузеры обрабатывают определенные макеты стилей.

По моему опыту, лучший способ борьбы с этим - предоставить несколько границ, то есть max-width/min-width по нескольким медиа-запросам. Это может быть болью в заднице для более интенсивного стиля, но для всего одного iFrame я думаю, что это можно сделать:

CSS

#ourIframe {
  display: block; /* Because you don't know if the document has altered css rules for iFrames */
  clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */
  position: fixed;
  width: 100%; /* Fall back in case the vw is not supported. */
  width: 100vw;
  height: 100%; /* Fall back */
  height: 100vh;
  overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */
  overflow-y: auto; /* Only gives the scroll bar if needed.*/ 
}

@media screen and (max-width: 320px) { /* iPhones 4 & 5 */
  #ourIframe {
    max-width: 320px;
    min-width: 320px;
  }
}

@media screen and (max-width: 375px) { /* iPhone 6 */
  #ourIframe {
    max-width: 375px;
    min-width: 375px;
  }
}

HTML

<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe"></iframe>

Ответ 3

Из-за "фиксированного" позиционирования iFrame,

Должен быть родительский элемент div с заданной шириной 320px или 100vw;
Вторая высота и ширина iFrame должны быть наследованы; height:inherit; width:inherit; не превышать границ экрана.

Итак здесь пример jsFiddle