Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak uzyskać 100% szerokość iframe w widoku pionowym iPhone'a


Zasadniczo mam ten sam problem co

tutaj
https://coderoad.ru/13079564/
ale ponieważ nigdy nie otrzymałem dobrej odpowiedzi, przepisuję to pytanie.
Problem polega więc na tym, że tylko w iPhonie Safari
width = "100%"
w widoku pionowym wydaje się być błędne i nadaje ramce iFrame szerokość krajobrazu. I wydaje mi się, że nie rozumiem, co się tutaj dzieje.
Używam poprawnej rzutni:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>

Witryna w ramce iFrame może w rzeczywistości być znacznie węższa niż 320 pikseli i mieć ten sam obszar wyświetlania. (Czytałem na jednym z tych podobnych pytań, że może to być czynnik, więc tylko wyjaśniam).
W debugerze widzę, że przed dodaniem adresu URL offsetWidth iFrame wynosił 304px, co jest poprawne, a po załadowaniu 588px, co jest poprawne dla widoku poziomego. Ale dlaczego się zmienił, nie mam pojęcia. Strona w ramce iFrame pochodzi z innej domeny, więc nie można jej zmienić, a strona główna nie robi nic z szerokością elementu iframe.
IPhone, którego używam, to iPhone 5 iOS 7.0.2
PS. Proszę nie publikować żadnych odpowiedzi JS, w których ręcznie zmieniasz rozmiar iframe, gdy zmienia się rozmiar okna, obecnie szukam poprawki nie-JS i jest to moja ostatnia opcja, której planuję użyć. Nie publikuj również odpowiedzi @media CSS, jeśli ustawisz
min-width
na 320px na szerokości widoku pionowego iPhone'a, nie zadziała to dla mnie z różnych powodów.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Tak więc po wielu godzinach debugowania w końcu znalazłem rozwiązanie, którego potrzebowałem, ale niestety nie jest to czyste rozwiązanie CSS:
CSS musisz zastosować to:
iframe {
min-width: 100%;
width: 100px;
*width: 100%;
}

Jeśli ustawisz szerokość poniżej szerokości portretu i ustawisz minimalną szerokość na 100%, otrzymasz
width: 100%
, ale tym razem wersja, która faktycznie działa, a teraz element iframe przyjmuje rzeczywistą szerokość kontenera, a nie szerokość terenu.
* width: 100%;
istnieje, więc w IE6 szerokość nadal będzie wynosić 100%.
Jednak działa to tylko z atrybutem iframe
scrolling = "no"
, jeśli przewijanie jest włączone, to już nie działa. W niektórych przypadkach może to ograniczyć jego użyteczność.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Odpowiedź jest tutaj:

rozmiar iframe z CSS na iOS
https://coderoad.ru/16937070/
Po prostu zawiń element iframe w element div z:
overflow: auto;
-webkit-overflow-scrolling:touch;

http://jsfiddle.net/R3PKB/7
http://jsfiddle.net/R3PKB/7/
/

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się