ios iframe width problem

tamaño iframe con CSS en iOS

Question

Hay un iframe, que básicamente tiene más contenido del que cabe en el marco. El tamaño del marco se basa en el tamaño de la pantalla del navegador y permite el desplazamiento de desbordamiento, que funciona perfectamente en todos los navegadores, excepto en iOS. En iOS, safari decide redimensionar el marco para que se ajuste al contenido. No es lo que esperarías

Código de ejemplo en jsFiddle:
http://jsfiddle.net/R3PKB/2/

Pruébelo en sus dispositivos iOS:
http://jsfiddle.net/R3PKB/2/embedded/result

El HTML:

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

El 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;
}

Answer 1

Esta es una vieja pregunta, pero como se trata primero de Google y el problema existe en los dispositivos actuales de iOS, volví a publicar una solución mejor que encontré en esta página: ¿Cómo hacer que un IFrame responda en iOS Safari?

Básicamente, si tiene un iframe con desplazamiento ( digamos un widget de Twitter ), la solución anterior no funcionará muy bien porque hace que el elemento primario sea desplazable. La solución que funcionó para mí es reemplazar la height: 100% con height: 1px; min-height: 100%; height: 1px; min-height: 100%; .

Answer 2

Puede hacerlo funcionar agregando un div de envoltura con overflow: auto; y -webkit-overflow-scrolling:touch; . Aquí está su ejemplo con él: http://jsfiddle.net/R3PKB/7/

De acuerdo con las preguntas anteriores sobre SO, es un error desde iOS 4. Encontré más información aquí: https://.com/a/6721310/1047398 iframe en iOS (iPad) problema de recorte de contenido

Answer 3

Si iOS Safari muestra su contenido de iframe de un origen diferente al esperado (es decir, algunos píxeles lo scrolling="no" ), intente agregar scrolling="no" como atributo al iframe. Esto debería evitar que se ajuste automáticamente a su contenido.

Más here.

Answer 4

usando height: 1px; min-height: 100%; height: 1px; min-height: 100%; no funcionó para mí, aunque no necesitaba un elemento de desplazamiento. Tuve que usar el overflow:auto; en un div circundante en su lugar. Tenga en cuenta que se desaconseja este método, ya que puede tener consecuencias no deseadas, pero lo probé en Android / iOS y en los navegadores de escritorio y todavía no podía encontrar ningún problema. dedos cruzados .

Esta es una buena publicación de Andy Shora sobre algunos matices iframe iOS: http://andyshora.com/iframes-responsive-web-apps-tips.html