web-dev-qa-db-fra.com

Comment obtenir l'iframe largeur 100% en mode portrait iPhone

En gros, j'ai le même problème que ici , mais comme il n’a jamais eu une bonne réponse, je repostais la question.

Le problème est donc que, dans iPhone Safari uniquement, le width="100%" sur la vue Portrait semble mal se comporter et donne à l'IFrame la largeur du paysage. Et je n'arrive pas à comprendre ce qui se passe ici. 

J'utilise la fenêtre d'affichage correcte:

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

Et le site au sein de l'IFrame peut en réalité aller beaucoup moins que 320px et a également le même viewport défini. (J'ai lu sur l'une des questions similaires que cela pouvait être un facteur, alors je clarifie).

Je peux voir dans le débogueur qu'avant l'ajout de l'URL, offsetWidth de iFrame était de 304 pixels, ce qui est correct, et après le chargement, de 588 pixels, ce qui est correct pour la vue Paysage. Mais pourquoi cela a changé, je n'en ai aucune idée. La page dans l'IFrame provient d'un domaine différent, ce qui n'a pas pu l'affecter et la page principale ne fait rien avec la largeur de l'iframe.

L'iPhone que j'utilise est un iPhone 5 iOS 7.0.2

PS. Veuillez ne pas publier de réponses JS dans lesquelles vous redimensionnez l'iframe manuellement lors du redimensionnement de la fenêtre. Je recherche actuellement un correctif non JS et c'est ma dernière option que je prévois d'utiliser. Veuillez également ne pas publier la réponse CSS @media si vous définissez min-width sur 320 pixels sur la largeur de la vue portrait de l'iPhone, cela ne fonctionnerait pas pour moi pour diverses raisons.

iphonecss
13
Idra

OK, donc après des heures de débogage, j'ai finalement trouvé la solution que je recherchais, mais malheureusement, ce n'est pas une solution CSS pure:

Le CSS que vous devez appliquer est le suivant:

    iframe {
        min-width: 100%; 
        width: 100px;
        *width: 100%; 
    }

Si vous définissez la largeur sur inférieure à la largeur du portrait et la largeur minimale à 100%, vous obtenez alors width: 100%, mais cette fois une version qui fonctionne réellement et maintenant l'iframe prend la largeur du conteneur et non la largeur du paysage. Le *width: 100%; est présent, de sorte que dans IE6, la largeur serait toujours de 100%.

Toutefois, cela ne fonctionne qu'avec l'attribut iframe scrolling="no"; si le défilement est autorisé, cela ne fonctionne plus. Cela pourrait donc limiter son utilité dans certains cas.

41
Idra

Il est répondu ici: taille iframe avec CSS sur iOS

Enveloppez simplement votre iframe dans une div avec:

overflow: auto;
-webkit-overflow-scrolling:touch;

http://jsfiddle.net/R3PKB/7/

1
Luke Knepper