web-dev-qa-db-fra.com

taille iframe avec CSS sur iOS

Il y a un iframe, qui a fondamentalement plus de contenu qu'il ne tient dans le cadre. Le dimensionnement du cadre est basé sur la taille de l'écran du navigateur et laisse défiler le débordement, ce qui fonctionne parfaitement sur tous les navigateurs, à l'exception d'iOS. Sur iOS, safari décide de redimensionner le cadre pour l'adapter au contenu. Pas ce que vous attendez.

Exemple de code sur jsFiddle:
http://jsfiddle.net/R3PKB/2/

Essayez-le sur vos appareils iOS:
http://jsfiddle.net/R3PKB/2/embedded/result

Le HTML:

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

Le 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;
}
ioscssmobileiframeresize
45
Guido Bouman

Vous pouvez le faire fonctionner en ajoutant un div enveloppant avec overflow: auto; et -webkit-overflow-scrolling:touch;. Voici votre exemple avec elle: http://jsfiddle.net/R3PKB/7/

Selon les questions précédentes sur SO c'est un bug depuis iOS 4. J'ai trouvé plus d'informations ici: https://stackoverflow.com/a/6721310/1047398 - problème de recadrage de contenu iframe sur iOS (iPad)

50
nvreez

C'est une vieille question, mais comme elle vient en premier sur Google et que le problème existe sur les appareils ios de nos jours, je republie un meilleur correctif que j'ai trouvé sur cette page: Comment obtenir un IFrame réactif dans iOS Safari?

Fondamentalement, si vous avez un iframe avec scroll ( disons un widget Twitter ), la solution ci-dessus ne fonctionnera pas très bien car elle rend le parent scrollable . Le correctif qui a fonctionné pour moi remplace height: 100% avec height: 1px; min-height: 100%;.

10
Andrei Cojea

Si iOS Safari affiche votre contenu iframe d'une origine différente de celle attendue (c'est-à-dire qu'il est décalé de quelques pixels), essayez d'ajouter scrolling="no" comme attribut à l'iframe. Cela devrait l'empêcher d'ajuster automatiquement son contenu.

Plus ici.

7
Kyle Dumovic

en utilisant height: 1px; min-height: 100%; n'a pas fonctionné pour moi, même si je n'avais pas besoin d'un élément de défilement. J'ai dû utiliser le overflow:auto; sur un div environnant à la place. Notez que cette méthode est déconseillée car elle peut avoir des conséquences inattendues, mais j'ai testé sur Android/iOS et les navigateurs de bureau et je n'ai pas encore trouvé de problème. doigts croisés .

Ceci est un bon article d'Andy Shora sur certaines nuances iOS iframe: http://andyshora.com/iframes-responsive-web-apps-tips.html

1
Chrispy