iFrame più largo dell'intero schermo su iPhone 6

Question

Potrebbe davvero usare l'aiuto su questo.

Sto tentando di aprire un iFrame nel mio sito che dovrebbe coprire l'intero schermo. Sfortunatamente, in iPhone 6 e versioni successive, la sua larghezza è in realtà più grande. Abbiamo un div ampio vicino all'iframe. Quando lo cancello tutto va bene. Il markup e stili è piuttosto semplice:

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

Android funziona bene.

Non sono riuscito a trovare una singola risorsa online con questo problema.

Si prega di aiutare. Grazie in anticipo.

Answer 1

Ci sono due modi per raggiungere la vostra soluzione.

1. Basta avvolgere il vostro iframe in un div con:

overflow: auto; -webkit-trabocco a scorrimento: tatto;

Ecco tuo esempio con esso: http://jsfiddle.net/R3PKB/7/

2. Oppure si può provare questo usando i CSS:

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

Se si imposta la larghezza inferiore alla larghezza verticale e impostare la da min-width a 100%, quindi ottieni la larghezza: 100%, ma questa volta una versione che funziona effettivamente e ora l'iframe prende la larghezza effettiva del contenitore e non la larghezza del paesaggio. La larghezza *: 100%; è così che in IE6 la larghezza sarebbe ancora del 100%.

Tuttavia, questo funziona solo con l'attributo iframe scrolling = "no", se lo scorrimento è consentito, quindi non funziona più. Quindi questo potrebbe limitare la sua utilità in alcuni casi.

Ecco un link ad un più dettagliato risposta

Answer 2

A volte mi imbatto in problemi simili sui browser mobili. Ci sono alcune differenze fondamentali nel modo in cui i diversi browser gestiscono determinati layout di stili.

Nella mia esperienza il modo migliore per combattere questo è di dare più limiti, cioè larghezza massima/larghezza minima su diverse query multimediali. Questo può essere un dolore nel culo per lo styling più intenso, ma solo per un iFrame penso che può essere fatto:

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

A causa di "fisso" posizionamento di iFrame,

1. Ci deve essere un elemento div padre con larghezza di set 320px o 100vw;
2. L'altezza e la larghezza del secondo iFrame devono essere ereditate; height:inherit; width:inherit; non superare i limiti dello schermo .

Così here jsFiddle example