Od wersji 56 w Chrome na urządzeniach z Androidem zmienia się sposób zmiany rozmiaru paska adresu URL. Oto co musisz wiedzieć:
Długości zdefiniowane w jednostkach widocznego obszaru (np. vh) nie zmieniają rozmiaru w zależności od wyświetlania lub ukrywania paska adresu URL. Zamiast tego rozmiar jednostki vh jest dopasowywany do wysokości widocznego obszaru, tak jakby pasek adresu URL był zawsze ukryty. Oznacza to, że jednostki vh będą dopasowywane do „największego możliwego widocznego obszaru”. Oznacza to, że parametr 100vh będzie większy niż widoczna wysokość na pasku adresu URL.
Pierwotny blok zawierający (ICB) to element główny zawierający blok używany podczas określania rozmiaru elementów względem ich elementów nadrzędnych. Na przykład nadanie elementowi <html> stylu width: 100%; height: 100% sprawi, że będzie on miał taki sam rozmiar jak ICB. Po wprowadzeniu tej zmiany rozmiar ICB nie będzie się zmieniał, gdy pasek adresu URL jest ukryty.
Wysokość pozostaje taka sama, jak gdyby pasek adresu URL zawsze był wyświetlany („najmniejszy możliwy widoczny obszar”). Oznacza to, że element o rozmiarze odpowiadającym wysokości ICB nie wypełni całkowicie widocznej wysokości, gdy pasek adresu URL jest ukryty.
Od powyższych zmian jest jeden wyjątek, który dotyczy elementów position: fixed. Ich zachowanie pozostaje bez zmian. Oznacza to, że element position:
fixed, którego blok zawiera blok ICB, zmienia rozmiar w odpowiedzi na wyświetlenie lub ukrycie paska adresu URL. Jeśli na przykład jego wysokość wynosi 100%, będzie zawsze wyświetlać dokładnie widoczną wysokość niezależnie od tego, czy pasek adresu URL będzie widoczny. Analogicznie w przypadku długości vh będą zmieniać rozmiar tak, aby pasowały do widocznej wysokości, z uwzględnieniem pozycji paska adresu URL.
Istnieje kilka przyczyn tej zmiany:
Jednostki, których można używać na urządzeniach mobilnych:
vh. Wcześniej korzystanie z jednostekvhoznaczało, że strona zmieniała się w niewłaściwy sposób za każdym razem, gdy użytkownik zmienia kierunek przewijania.Większa wygoda użytkowników. Jeśli strona przeformatuje się podczas czytania, użytkownik może utracić swoją względną lokalizację w dokumencie. Jest to frustrujące, ale wiąże się z dodatkowym obciążaniem procesora i baterią, co przekłada się na wyświetlenie i ponowne wyrenderowanie strony.
Ulepszona interoperacyjność z Safari na iOS. Nowy model powinien odpowiadać działaniu przeglądarki Safari, co ułatwia życie programistom stron internetowych. Ustawienie jednostki
vhjako największego widocznego obszaru to nieintuicyjna decyzja, ale najmniejszym możliwym rozmiarem ICB jest dostosowanie działania przeglądarki Safari.
W sytuacjach na pełnym ekranie, gdy pasek adresu URL jest zablokowany, zamiast niego ICB będzie używać wysokości pełnoekranowej. Jest to zgodne z definicjami powyżej, ponieważ „najmniejszy możliwy widoczny obszar” to pełny widoczny obszar, ponieważ pasek adresu URL nie wyświetla się podczas przewijania.
Demonstracyjny
- Oto prezentacja.
Cztery paski po prawej stronie to wszystkie możliwe kombinacje elementów
99%,99vh,position:fixediposition:absolutedostępnych na stronie, którą można przewijać. Ukrycie paska adresu URL pokazuje, jak wpływa on na każdy z nich. Zdarzenia zmiany rozmiaru są wydrukowane na stronie.
Pomoc
- Chrome 56 na Androidzie.