W Chrome na Androida od wersji 56 zmienia się sposób zmiany rozmiaru paska adresu. Oto co musisz wiedzieć:
Długości zdefiniowane w jednostkach widoku (np. vh) nie będą zmieniać rozmiaru w zależności od tego, czy pasek adresu URL jest widoczny czy ukryty. Zamiast tego jednostki vh będą dopasowywane do wysokości pola widzenia 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 100vh będzie większa niż widoczna wysokość, gdy wyświetlany jest pasek adresu URL.
Początkowy blok zawierający (ICB) to główny blok zawierający, który jest używany podczas dostosowywania rozmiaru elementów względem ich elementów nadrzędnych. Na przykład nadanie elementowi <html> stylu width: 100%; height: 100% spowoduje, że będzie on miał taki sam rozmiar jak ICB. Dzięki tej zmianie interfejs ICB nie będzie się zmieniał, gdy pasek adresu URL jest ukryty.
Zamiast tego będzie ona mieć taką samą wysokość, jakby pasek adresu URL był zawsze widoczny („najmniejszy możliwy widok”). Oznacza to, że element o wysokości ICB nie wypełni całkowicie widocznej wysokości, gdy pasek adresu URL jest ukryty.
Wyjątkiem od powyższych zmian są elementy o wartości position: fixed. Ich działanie pozostaje bez zmian. Oznacza to, że element position:
fixed, którego blok jest elementem zawierającym ICB, zmieni rozmiar w reakcji na wyświetlanie lub ukrywanie paska adresu URL. Jeśli na przykład jego wysokość wynosi 100%, zawsze będzie wypełniać dokładnie widoczną wysokość, niezależnie od tego, czy pasek adresu URL jest widoczny, czy nie. Podobnie w przypadku długości vh: ich rozmiar zostanie dostosowany do widocznej wysokości z uwzględnieniem pozycji paska adresu URL.
Ta zmiana ma kilka przyczyn:
Dostępne jednostki
vhna urządzeniach mobilnych. Wcześniej używanie jednostekvhpowodowało, że strona nieprzyjemnie się przeformatowywała za każdym razem, gdy użytkownik zmieniał kierunek przewijania.Ulepszenie wrażeń użytkowników. Jeśli podczas czytania strony nastąpi jej przeformatowanie, użytkownik może utracić względną pozycję w dokumencie. Jest to frustrujące, ale powoduje też dodatkowe wykorzystanie procesora i zużycie baterii na potrzeby ponownego rozmieszczania i odświeżania strony.
Ulepszona współpraca z Safari w iOS. Nowy model powinien odpowiadać działaniom przeglądarki Safari, co ułatwi życie programistom. Nieintuicyjny wybór polegający na tym, że jednostki
vhmają jak największy widoczny obszar, a ICB – jak najmniejszy, ma na celu dopasowanie działania do przeglądarki Safari.
W przypadku scenariuszy pełnego ekranu, w których pasek adresu URL jest zablokowany w ukrytej pozycji, ICB będzie używać pełnej wysokości ekranu. Jest to zgodne z powyższymi definicjami, ponieważ „najmniejszy możliwy widok” będzie oznaczał pełny widok, ponieważ pasek adresu URL nie jest widoczny podczas przewijania.
Prezentacja
- Oto demonstracja.
Cztery paski po prawej stronie strony to wszystkie możliwe kombinacje atrybutów
99%,99vh,position:fixediposition:absolutewyświetlane na stronie, którą można przewijać. Ukrywając pasek adresu URL, możesz sprawdzić, jak to wpływa na poszczególne strony. Zdarzenia zmiany rozmiaru są drukowane na stronie.
Pomoc
- Chrome 56 na Androida.