IFrame hauteur questions sur iOS (mobile safari)

Exemple la source de la page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

Le problème, c'est que height de 200px de l'Iframe de style en ligne est ignoré sur le navigateur safari mobile:

IFrame hauteur questions sur iOS (mobile safari)

Aussi j'aimerais changer la hauteur de l'IFrame dynamiquement via la vanille JavaScript qui ne fonctionne pas du tout avec le code suivant:

document.getElementsByTagName('iframe')[0].style.height = "100px"

La valeur de la height style est modifié correctement selon les outils de dev, mais c'est tout simplement ignorée, car la effectivement rendu de la hauteur de l'IFrame ne change pas.

Cela ne semble être un problème dans le navigateur Safari mobile et fonctionne comme prévu sur les dernières versions de bureau Safari, Firefox, Chrome, Android WebView etc.

Testpage: http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.: J'ai testé avec différents périphériques sur browserstack et a également pris des captures d'écran depuis je n'ai pas de pas de réelle iDevice à portée de main.

OriginalL'auteur suamikim | 2015-12-16

  1. 11

    Il ressemble à ceci: Comment obtenir un IFrame pour être réactif dans iOS Safari?

    iFrames avez un problème sur iOS uniquement, de sorte que vous devrez adapter votre iframe.

    Vous pouvez mettre une div en enveloppant les iframe, jeu de css sur l'iframe et, ce qui a fonctionné pour moi, a été d'ajouter: mettre l'attribut scrolling= "no".

    Vous souhaitant bonne chance.

    La solution dans ce thread en résolu une partie de mon problème qui est survenu lors de la rotation de l'appareil. Depuis que j'ai fait ont accès aux sources de l'IFrame de contenu, j'ai pu résoudre mes problèmes de hauteur par définition dynamique de la hauteur de l'IFrame corps à la même hauteur, j'ai essayé de définir sur l'IFrame lui-même.

    OriginalL'auteur Gabriel Augusto

  2. 6

    J'ai eu le même problème. Et après avoir essayé toutes les solutions que j'ai pu trouver, j'ai enfin trouvé comment le résoudre.

    Ce problème est causé par l'iOS Safari, il sera auto-consacrer la hauteur de l'iframe d'adapter le contenu de la page à l'intérieur.

    Si vous mettez le scrolling='no' attribut de l'iframe que <iframe scrolling='no' src='content.html'>, ce problème pourrait être résolu, mais l'iframe ne pouvait pas montrer le contenu complet de la page, le contenu qui dépasse le cadre sera coupé.

    Nous avons donc besoin de mettre une div en enveloppant les iframe, et de gérer l'événement scroll.

    <style>
.demo-iframe-holder {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>

    références:

    https://davidwalsh.name/scroll-iframes-ios

    Comment obtenir un IFrame pour être réactif dans iOS Safari?

    Espère que cela aide.

    OriginalL'auteur Freya Yu

  3. -1

    PROBLÈME:

    J'ai eu le même problème. Dimensionnement/style l'iframe du div conteneur et l'ajout de scrolling="no" à l'iframe n'a pas fonctionné pour moi. Avoir un défilement de débordement comme Freya décrit n'est pas une option, parce que le contenu de mon iframe nécessaires pour dimensionner en fonction du conteneur parent. Voici comment mon original (pas de travail, débordant de son contenant) code iframe a été structuré:

    <style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100%;
        height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

    SOLUTION:

    Cette super simple peu de CSS hack a fait le tour:

    <style>
    .iframe-wrapper {
        position: relative;
        height: 500px;
        width:   100%;
    }

    .iframe {
        display: block;
        position: absolute;
        top:    0;
        bottom: 0;
        left:   0;
        right:  0;
        width:  100px;
        min-width:  100%;
        height: 100px;
        min-height: 100%;
    }
</style>

<div class="iframe-wrapper">
    <iframe frameborder="0" scrolling="no" class="iframe" src="content.html"></iframe>
</div>

    Ensemble de l'iframe de la hauteur/largeur de certains petits, au hasard de valeur de pixel. Set min-hauteur & min-width à ce que vous voulez vraiment à la hauteur/largeur de l'être. Cela a complètement résolu le problème pour moi.

    Clairement, l'ajout de min-width et min-height ne fonctionne pas pour moi et je serais surpris si il l'a fait. Réponse par freya-yu a fait le tour.

    OriginalL'auteur AnnaFractuous