100% wzrost w przeglądarce telefonu za pomocą CSS

Question

pracuję na mojej stronie i chcę wyglądać naprawdę proste na telefon, w zasadzie istnieją tylko trzy sekcje, z których każda powinna być dopasowana szerokość i wysokość okna

<section style="width: 100%; min-height: 100%"> 

</section> 

Wygląda idealnie w mojej przeglądarce komputera w trybie urządzenia, ale kiedy otworzę go na telefonie komórkowym (iPhone), pojawia się problem z adresem URL, który zmniejsza się, gdy zsuwamy się. Przy ładowaniu strony minimal-height dostosowuje się do wysokości przeglądarki, w tym do paska, i nie zmienia się, gdy pasek zmienia jej wymiar. Więc nie pasuje już do ekranu. Próbowałem tego:

<meta name="viewport" content="height=device-height"> 

Ale sekcje są oczywiście wysokie. Prawdopodobnie mógłbym zrobić jakiś obejście w jQuery, ale wolałbym nie. Mam nadzieję, że w CSS jest kilka prostych rozwiązań. Dziękuję za poświęcony czas. Jeśli chcesz go zobaczyć na żywo: http://kacpergalka.nazwa.pl/_portfolio

Answer 1

Możesz wypróbować jednostkę vh (wysokość rzutni) w swoim stylu minimalistycznej wysokości.

<section style="width: 100%; min-height: 100vh"> 

</section> 

Inną opcją byłoby użycie calc().

<section style="width: 100%; height: calc(100%);"> 

</section> 

Answer 2

Możesz spróbować tej skali meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">