IFrame Höhe Probleme auf iOS (mobile Safari)

Beispielseite Quelle:IFrame Höhe Probleme auf iOS (mobile Safari)

<!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>

Das Problem ist, dass height von 200px vom IFrames Inline-Stil auf mobile Safari ignoriert:

Auch ich möchte die Höhe des IFrame dynamisch über Vanilla JavaScript ändern, die überhaupt nicht mit dem folgenden Code funktioniert:

Der Wert des height-Stils wird entsprechend den Dev-Tools korrekt geändert, aber er wird einfach ignoriert, da sich die tatsächlich dargestellte Höhe des IFrame nicht ändert.

Dies scheint nur ein Problem in Mobile Safari zu sein und arbeitet als auf die neuesten Versionen von Desktop erwartet Safari, Firefox, Chrome, Androids WebView usw.

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

Ps .: Ich habe das mit verschiedenen Geräten am bannerstack getestet und auch die Screenshots gemacht, da ich kein aktuelles iDevice zur Hand habe.

Quelle

2015-12-16 suamikim

Es sieht wie folgt aus: How to get an IFrame to be responsive in iOS Safari?

iFrames ein Problem auf iOS nur, damit Sie Ihre iframe um es anzupassen haben.

Sie können ein div wrapping den iframe, setzen css auf dem iframe und, was für mich funktionierte, dies: Setzen Sie das Attribut scrolling = 'no'.

Wir wünschen Ihnen, schauen.

Quelle

2015-12-16 19:30:04

[Die Lösung] (http://stackoverflow.com/a/23083463/1273551) im erwähnten Thread löste einen Teil meines Problems, der beim Drehen des Gerätes auftrat. Da ich tatsächlich Zugriff auf die Quellen des IFrame-Inhalts habe, war ich in der Lage, meine Höhenprobleme zu lösen, indem ich die Höhe des IFrame-Rumpfs auf die gleiche Höhe festlegte, die ich auf dem IFrame selbst eingestellt hatte. – suamikim

Ich habe das gleiche Problem. Und nachdem ich alle Lösungen, die ich finden konnte, ausprobiert hatte, fand ich endlich heraus, wie ich es lösen konnte.

Dieses Problem wird durch iOS Safari verursacht. Es wird automatisch die Höhe von iframe an den Seiteninhalt anpassen.

Wenn Sie das scrolling = 'no' Attribut auf den iframe als <iframe scrolling='no' src='content.html'> setzen, könnte dieses Problem gelöst werden, aber der iframe konnte nicht den vollständigen Inhalt der Seite anzeigen, der Inhalt, der den Rahmen überschreitet, wird abgeschnitten.

Also brauchen wir ein div setzen die iframe Einwickeln, und das Scroll-Ereignis in damit umgehen.

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

Referenzen:

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

How to get an IFrame to be responsive in iOS Safari?

Hoffe, es hilft.

Quelle

2017-08-08 08:09:50

-1

PROBLEM:

Ich hatte das gleiche Problem. Das Formatieren/Formatieren des Container-Divs des iframes und das Hinzufügen von scrolling = "no" zum iframe funktionierte für mich nicht.Ein Scrolling-Overflow wie Freya beschreibt, war auch keine Option, da der Inhalt meines iframe abhängig vom übergeordneten Container dimensioniert werden musste. Hier ist, wie mein Original (nicht funktioniert, überfüllt sein Behälter) iframe-Code strukturiert wurde:

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

LÖSUNG:

Diese super einfache kleine CSS-Hack der Trick:

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

Stellen Sie die iframe des Höhe/Breite bis zu einem kleinen, zufälligen Pixelwert. Stellen Sie die minimale Höhe auf & min-width zu dem, was Sie tatsächlich wollen, die Höhe/Breite zu sein. Das hat das Problem für mich komplett gelöst.

Quelle

2017-08-08 21:22:04 AnnaFractuous

Das einfache Hinzufügen von 'min-width' und' min-height' funktionierte nicht für mich und ich wäre überrascht wenn es so wäre. [Antwort von freya-yu] (https://Stackoverflow.com/a/45562779/638546) hat den Trick gemacht. –

IFrame Höhe Probleme auf iOS (mobile Safari)

Antwort

Verwandte Themen