iFrame szerszy niż cały ekran iPhone'a 6

Question

Naprawdę mógłbyś skorzystać z pomocy na ten temat.

Próbuję otworzyć iFrame w mojej witrynie, która powinna obejmować cały ekran. Niestety, w iPhone 6 i nowszych jego szerokość jest większa. Mamy szeroki div obok elementu iframe. Kiedy go usuwam, wszystko jest w porządku. Znaczniki i styl jest dość prosta:

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

Android działa w porządku.

Nie można znaleźć jednego zasobu online z tym problemem.

Proszę o pomoc. Z góry dzięki.

Answer 1

Istnieją dwie drogi, aby osiągnąć swoje rozwiązanie.

1. Wystarczy owinąć iframe w div z:

overflow: auto; -webkit-przelewowy przewijanie: dotyk;

Tu masz przykład z nim: http://jsfiddle.net/R3PKB/7/

2. Albo można spróbować to za pomocą CSS:

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

Jeżeli ustawić szerokość do niższa niż szerokość pionowej i ustawić min-szerokość do 100%, potem próg dostajesz szerokość: 100%, ale tym razem wersja, która faktycznie działa, a teraz element iframe przyjmuje rzeczywistą szerokość kontenera, a nie szerokość pejzażu. Szerokość *: 100%; jest tak, że w IE6 szerokość nadal będzie wynosić 100%.

Jednak działa to tylko z przewijaniem atrybutu iframe = "no", jeśli przewijanie jest dozwolone, to już nie działa. Więc może to ograniczyć przydatność w niektórych przypadkach.

Oto link do bardziej szczegółowo odpowiedź

Answer 2

Czasami mam podobne problemy w przeglądarkach mobilnych. Istnieją pewne kluczowe różnice w sposobie obsługi różnych układów stylów przez różne przeglądarki.

Z mojego doświadczenia wynika, że ​​najlepszym sposobem zwalczania tego jest nadanie wielu granic, tj. Maksymalna szerokość/minimalna szerokość w kilku zapytaniach o media. Może to być ból w dupie do bardziej intensywnej stylizacji, ale tylko na jeden iFrame myślę, że można to zrobić:

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

Ze względu na „stałe” pozycjonowanie elementu iFrame,

1. Musi być element nadrzędny div o ustawionej szerokości 320px lub 100vw;
2. Druga wysokość i szerokość iFrame muszą być dziedziczone; height:inherit; width:inherit; nie może przekraczać granic ekranów .

Więc here jsFiddle example