Tamaño iframe con CSS en iOS

Hay un iframe, que básicamente tiene más contenido que el que cabe en el marco. El tamaño del marco se basa en el tamaño de la pantalla del browser y permite el desplazamiento de desbordamiento, que funciona perfectamente en todos los browseres, excepto iOS. En iOS, Safari decide cambiar el tamaño del marco para adaptarse al contenido. No es lo que esperas.

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

Puedes hacer que funcione agregando un div wrapping con overflow: auto; y -webkit-overflow-scrolling:touch; . Aquí está su ejemplo: http://jsfiddle.net/R3PKB/7/

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

Esta es una vieja pregunta, pero como viene primero en Google y el problema existe en los dispositivos ios de hoy en día, vuelvo a publicar una mejor solución 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 padre pueda desplazarse. La solución que funcionó para mí es replace la height: 100% con height: 1px; min-height: 100%; height: 1px; min-height: 100%; .

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

Mas aqui

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 count que este método no es recomendable, ya que puede tener consecuencias no deseadas, pero probé en los browseres de Android / iOS y de escritorio y no pude encontrar ningún problema todavía. dedos cruzados

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