iFrame breiter als der gesamte Bildschirm auf dem iPhone 6

Question

Konnte wirklich die Hilfe zu diesem verwenden.

Ich versuche, einen iFrame in meiner Website zu öffnen, die den gesamten Bildschirm abdecken sollte. Leider, in iPhone 6 und höher, ist seine Breite tatsächlich größer. Wir haben eine breite div neben dem iframe. Wenn ich es lösche, ist alles in Ordnung. Das Markup und Stile ist recht einfach:

<div id="someDiv" style="width: 1000px"></div> 
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe> 

Android arbeitet in Ordnung.

Ich konnte mit diesem Problem keine einzige Ressource online finden.

Bitte helfen Sie. Vielen Dank im Voraus.

Answer 1

Es gibt zwei Wege Ihre Lösung zu erreichen.

1. wickeln Sie einfach Ihre iframe in einem div mit:

Überlauf: auto; -webkit-Überlauf-Scrolling: touch;

Hier ist dein Beispiel mit ihm: http://jsfiddle.net/R3PKB/7/

2. Oder Sie können diese mit CSS versuchen:

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

Wenn Sie die Breite geringer ist als die Hochformatbreite und stellen Sie die Set min-width zu 100%, dann bekommst du die Breite: 100%, aber diesmal eine Version, die tatsächlich funktioniert und jetzt nimmt der iframe die tatsächliche Containerbreite und nicht die Querformatbreite. Die * Breite: 100%; ist da so, dass in IE6 die Breite immer noch 100% wäre.

Dies funktioniert jedoch nur mit dem iframe-Attribut scrolling = "no", wenn das Scrollen erlaubt ist, dann funktioniert es nicht mehr. Dies kann in einigen Fällen die Nützlichkeit einschränken.

Hier ist ein link zu einem Detail Antwort

Answer 2

Ich stoße manchmal auf ähnliche Probleme in mobilen Browsern. Es gibt einige wichtige Unterschiede in der Art, in der verschiedene Browser bestimmte Layouts von Stilen handhaben.

Nach meiner Erfahrung ist der beste Weg, dies zu bekämpfen, mehrere Grenzen zu geben, d. H. Max-width/min-width über mehrere Medienabfragen. Dies kann für intensiveres Styling eine Nervensäge sein, aber nur für ein iFrame ich denke, es kann getan werden:

CSS

#ourIframe { 
    display: block; /* Because you don't know if the document has altered css rules for iFrames */ 
    clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */ 
    position: fixed; 
    width: 100%; /* Fall back in case the vw is not supported. */ 
    width: 100vw; 
    height: 100%; /* Fall back */ 
    height: 100vh; 
    overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */ 
    overflow-y: auto; /* Only gives the scroll bar if needed.*/ 
} 

@media screen and (max-width: 320px) { /* iPhones 4 & 5 */ 
    #ourIframe { 
    max-width: 320px; 
    min-width: 320px; 
    } 
} 

@media screen and (max-width: 375px) { /* iPhone 6 */ 
    #ourIframe { 
    max-width: 375px; 
    min-width: 375px; 
    } 
} 

HTML

<div id="someDiv" style="width: 1000px"></div> 
<iframe id="ourIframe"></iframe> 

Answer 3

Wegen der „festen“ Positionierung von iFrame,

1. Es muss ein Eltern-Div-Element mit der eingestellten Breite 320px oder 100vw geben;
2. Zweite iFrame Höhe und Breite müssen erben; height:inherit; width:inherit; nicht überschreiten Bildschirm Grenzen.

So here jsFiddle example