Rozmiar iframe z CSS na iOS

Question

Istnieje element iframe, który ma więcej zawartości niż pasuje do ramki. Rozmiar ramki jest oparty na rozmiarze ekranu przeglądarki i umożliwia przewijanie, które działa idealnie we wszystkich przeglądarkach, z wyjątkiem iOS. W systemie iOS safari decyduje się zmienić rozmiar ramki, aby dopasować ją do zawartości. Nie to, czego można się spodziewać.

Przykładowy kod na jsFiddle:
http://jsfiddle.net/R3PKB/2/

Wypróbuj go na swoich urządzeniach z iOS:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<div class="frame_holder"> 
    <iframe class="my_frame"> 
    // The content 
    </iframe> 
</div> 

CSS:

body { 
    position: relative; 
    background: #f0f0f0; 
} 

.frame_holder { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    left: 50px; 
    right: 50px; 
    background: #ffffff; 
} 

.my_frame { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #e0e0e0; 
} 

Answer 1

Możesz sprawić, by działało, dodając element zawijający z overflow: auto; i -webkit-overflow-scrolling:touch;. Tu masz przykład z nim: http://jsfiddle.net/R3PKB/7/

Według wcześniejszych pytań na SO jest to błąd, ponieważ iOS 4. znalazłem więcej informacji tutaj: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

Answer 2

jest to stara sprawa, ale ponieważ jest na pierwszym miejscu na google i problem istnieje na W dzisiejszych czasach, urządzeń iOS, ja odśwież lepsze poprawki, które znalazłem na tej stronie: How to get an IFrame to be responsive in iOS Safari?

Zasadniczo, jeśli masz iframe z przewijaniem (powiedzmy widget twitter), powyższe rozwiązanie nie będzie działać zbyt dobrze, ponieważ spowoduje przewijanie elementu nadrzędnego. Poprawka, która zadziałała, zastępuje height: 100% przez height: 1px; min-height: 100%;.

Answer 3

przy użyciu height: 1px; min-height: 100%; nie działa dla mnie, chociaż nie potrzebowałem przewijanego elementu. Musiałem zamiast tego użyć overflow:auto; na otaczającym div. Zauważ, że ta metoda jest odradzana, ponieważ może mieć niezamierzone konsekwencje, ale testowałem ją w systemach Android/iOS i przeglądarkach komputerowych i nie mogłem znaleźć żadnych problemów. palce skrzyżowane.

Jest to ładny post z Andy Shora na niektórych iOS iframe niuanse: http://andyshora.com/iframes-responsive-web-apps-tips.html

Answer 4

Jeśli iOS Safari wyświetla zawartość iframe z innego pochodzenia niż oczekiwano (to znaczy jest przesunięty na niektórych pikseli), spróbuj dodać scrolling="no" jako atrybut iframe. Powinno to uniemożliwić automatyczne dopasowanie jego zawartości.

Więcej here.