¿Cómo conseguir que un IFrame sea responsivo en iOS Safari?

El problema, al parecer, es que Mobile Safari se negará a obedecer el ancho de su iFrame si el documento que contiene es más ancho de lo que ha especificado. Ejemplo:

Http://jsbin.com/hapituto/1

En un navegador de escritorio, verá un iFrame y un Div ambos configurados en 300px. El contenido es más ancho para que pueda desplazarse por el iFrame.

En mobile safari, sin embargo, notará que el iFrame se expande automáticamente al ancho del contenido.

Mi conjetura es que esta es una solución para problemas de larga data con el desplazamiento de contenido dentro de una página. En el pasado, si tenías un iframe de desplazamiento grande en un dispositivo táctil, te quedarías 'atascado' en el iframe, ya que se desplazaría en lugar de la página en sí. Parece que Apple ha decidido que el comportamiento predeterminado de un iFrame es 'no scroll' y se expande para evitarlo.

Una opción puede ser esta solución. En lugar de asumir que el iFrame se desplazará, coloque el iframe en un DIV que tenga control cambio y deja que se desplace.

Ejemplo: http://jsbin.com/zakedaja/1

Ejemplo de marcado:

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

En mobile safari, ahora puede desplazarse por el contenido del iFrame ahora completamente expandido a través del div que lo contiene.

La trampa: Esto se ve muy feo en un navegador de escritorio, ya que ahora tiene barras de desplazamiento dobles. Así que es posible que tenga que hacer algo de detección de navegador con JS para evitar esto.

Necesitaba una solución cross-browser. Los requisitos eran:

• necesario para trabajar tanto en iOS como en otros lugares
• no tiene acceso al contenido del iFrame
• necesito que se desplace!

Construyendo lo que aprendí de @Idracon respecto a scrolling="no" en iOS y este post sobre la adaptación de contenido iFrame a la pantalla en iOS esto es lo que terminé con. Espero que ayude a alguien =)

HTML

<div id="url-wrapper"></div>

CSS

html, body{
    height: 100%;
}

#url-wrapper{
    margin-top: 51px;
    height: 100%;
}

#url-wrapper iframe{
    height: 100%;
    width: 100%;
}

#url-wrapper.ios{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
    height: 100%;
}

#url-wrapper.ios iframe{
    height: 100%;
    min-width: 100%;
    width: 100px;
    *width: 100%;
}

JS

function create_iframe(url){

    var wrapper = jQuery('#url-wrapper');

    if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
        wrapper.addClass('ios');
        var scrolling = 'no';
    }else{
        var scrolling = 'yes';
    }

    jQuery('<iframe>', {
        src: url,
        id:  'url',
        frameborder: 0,
        scrolling: scrolling
    }).appendTo(wrapper);

}

El problema con todas estas soluciones es que la altura de la iframe nunca cambia realmente.

Esto significa que no podrá centrar elementos dentro de iframe usando Javascript, position:fixed;, o position:absolute; ya que el iframe nunca se desplaza.

Mi solución detallada aquí es envolver todo el contenido del iframe dentro de un div usando este CSS:

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

De esta manera Safari cree que el contenido no tiene altura y le permite asignar la altura de la iframe correctamente. Este también le permite colocar elementos de cualquier manera que desee.

Puedes ver una demostración rápida y sucia aquí.

Estoy trabajando con ionic2 y la configuración del sistema es la siguiente -

******************************************************

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68



******************************************************

Para mí, este problema se resolvió con este código-
para html iframe tag -

<div class="iframe_container">
      <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
        <!--  <img src="img/video-icon.png"> -->
      </iframe><br>
   </div>

Ver css de lo mismo que -

.iframe_container {
  overflow: auto; 
  position: relative; 
  -webkit-overflow-scrolling: touch;
  height: 75%;
}

iframe {
  position:relative;
  top: 2%;
  left: 5%;
  border: 0 !important;
  width: 90%;
}

La propiedad Position juega un papel vital aquí en mi caso.
posición: relativa;

¡Puede ayudarte a ti también!!!

Solución única de CSS

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

Otro demo aquí con página HTML en iframe

Tuve un problema con el ancho en el panel de contenido creando una barra de desplazamiento horizontal para el iframe. Resultó que una imagen sostenía el ancho más ancho de lo esperado. Pude resolverlo configurando el ancho máximo de css de todas las imágenes en un porcentaje.

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

img {
        max-width: 100%;
        height:auto;
    }

De hecho para mí solo funcionó en ios desactivando el desplazamiento

<iframe src="//www.youraddress.com/" scrolling="no"></iframe>

Y tratando el sistema operativo a través de script.

Este problema también está presente en iOS Chrome.

En mi caso necesitaba un Eché un vistazo a todas las soluciones anteriores, la mayoría son muy hacky.

Si no necesita soporte para navegadores más antiguos, simplemente establezca el ancho del iframe en 100vw; iframe { max-width: 100%; /* Limits width to 100% of container */ width: 100vw; /* Sets width to 100% of the viewport width while respecting the max-width above */ }

Nota: Compruebe el soporte para unidades viewport https://caniuse.com/#feat=viewport-units