Comment obtenir une IFrame pour être responsive En Safari iOS?

le problème, il semble, est que le Safari Mobile refusera d'obéir à la largeur de votre iFrame si le document qu'il contient est plus large que ce que vous avez spécifié. Exemple:

http://jsbin.com/hapituto/1

sur un navigateur de bureau, vous verrez un iFrame et un Div tous les deux définis à 300px. Le contenu est plus large de sorte que vous pouvez faire défiler l'iFrame.

sur mobile safari, cependant, vous noterez que le iFrame est auto-étendu à la largeur du contenu.

à mon avis, il s'agit d'une solution de contournement pour les problèmes de longue date avec le contenu défilant dans une page. Dans le passé, si vous aviez une grande iframe de défilement sur un appareil tactile, vous seriez "coincé" dans l'iframe car ce serait défiler au lieu de la page elle-même. Il semble Qu'Apple ait décidé que le comportement par défaut d'une iFrame est 'no scroll' et se développe pour l'empêcher.

une option peut être contournement. Au lieu de supposer que l'iFrame va défiler, placez l'iframe dans une DIV sur laquelle vous avez le contrôle et laissez ce défilement.

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

exemple de balisage:

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

sur le safari mobile, vous pouvez maintenant faire défiler le contenu de l'iFrame maintenant entièrement élargi via le div qui le contient.

le piège: cela semble vraiment laid sur un navigateur de bureau, comme maintenant vous avez des barres de défilement doubles. Donc vous devrez peut-être faire une détection de navigateur avec JS pour contourner cela.

j'avais besoin d'une solution de navigateur. Les besoins étaient les suivants:

• nécessaire pour travailler à la fois sur iOS et ailleurs
• n'ont pas accès au contenu dans l'iFrame
• j'en ai besoin pour faire défiler!

construire à partir de ce que j'ai appris de @Idra concernant le défilement= "non" sur iOS et ce post sur l'ajustement du contenu iFrame à l'écran dans iOS voici ce que j'ai fini avec. Espérons que cela aide quelqu'un =)

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

}

le problème avec toutes ces solutions est que la hauteur du iframe ne change jamais vraiment.

cela signifie que vous ne pourrez pas centrer des éléments à l'intérieur du iframe en utilisant Javascript, position:fixed; , ou position:absolute; puisque le iframe lui-même ne défile jamais.

ma solution détaillé ici est d'envelopper tout le contenu de l'iframe dans un div en utilisant ce CSS:

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

de cette façon Safari croit que le contenu n'a pas de hauteur et vous permet d'attribuer la hauteur du iframe correctement. Cela vous permet également de positionner les éléments comme vous le souhaitez.

vous pouvez voir une démo rapide et sale ici.

je travaille avec ionic2 et la configuration du système est comme ci - dessous -

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

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



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

pour moi ce problème a été résolu avec ce code -

pour la balise iframe html -

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

voir css du même 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%;
}

Position la propriété joue un rôle vital dans mon cas.

position: relative;

Il peut vous aider aussi!!!

CSS seule solution

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

DÉMO

l'Autre démo ici avec le HTML de la page dans un iframe

j'ai eu un problème avec la largeur sur le volet de contenu créant une barre de défilement horizontale pour l'iframe. Il s'est avéré qu'une image tenait la largeur plus large que prévu. J'ai pu le résoudre en réglant toutes les images CSS Max-width à un pour cent.

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

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

en fait pour moi vient de travailler dans ios désactivant le rouleau

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

et le traitement de L'OS via script.

ce numéro est également présent sur iOS Chrome.

dans mon cas, j'avais besoin d'un J'ai jeté un coup d'oeil à toutes les solutions ci-dessus, la plupart sont très hacky.

si vous n'avez pas besoin de support pour les navigateurs plus anciens, il suffit de régler la largeur iframe à 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 */ }

Note : Vérifier le support des unités de viewport https://caniuse.com/#feat=viewport-units