Zmienia się sposób zmiany rozmiaru paska adresu URL w Chrome na Androida od wersji 56. Oto co musisz wiedzieć:
Długości określone w jednostkach widocznego obszaru (tj. vh) nie zmieniają rozmiaru w odpowiedzi na wyświetlany lub ukryty pasek adresu URL. Zamiast tego wymiary jednostek vh będą dopasowywane do wysokości widocznego obszaru, jakby pasek adresu URL był zawsze ukryty. Oznacza to, że jednostki typu vh zostaną dopasowane do „największego możliwego widocznego obszaru”. Oznacza to, że wysokość 100vh będzie większa niż widoczna wysokość paska adresu URL.
Początkowy blok składowy (ICB) to blok główny zawierający blok używany podczas dobierania 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. Dzięki tej zmianie ICB nie zmienia rozmiaru, gdy pasek adresu URL jest ukryty.
Jego wysokość pozostanie bez zmian, tak jakby pasek adresu URL był zawsze wyświetlany („najmniejszy możliwy widoczny widoczny obszar”). Oznacza to, że element o rozmiarze do wysokości ICB nie wypełni całej widocznej wysokości, gdy pasek adresu URL jest ukryty.
Jedyny wyjątek od powyższych zmian dotyczy elementów position: fixed. Sposób działania pozostaje bez zmian. Oznacza to, że element position:
fixed, którego blokiem jest ICB, zmieni rozmiar w odpowiedzi na wyświetlenie lub ukrycie paska adresu URL. Jeśli na przykład jego wysokość wynosi 100%, będzie on zawsze wypełniał dokładnie widoczną wysokość niezależnie od tego, czy będzie widoczny pasek adresu URL. Podobnie w przypadku długości vh dostosują one swój rozmiar do widocznej wysokości, biorąc pod uwagę pozycję słupka adresu URL.
Istnieje kilka przyczyn tej zmiany:
Jednostki
vhmożliwe do wykorzystania na urządzeniach mobilnych. Wcześniej stosowanie jednostekvhpowodowało nieregularne przeformatowanie strony za każdym razem, gdy użytkownik zmienił kierunek przewijania.Większa wygoda użytkowników. Jeśli strona podczas czytania zmieni się na inną, może to spowodować utratę względnej lokalizacji w dokumencie. Jest to frustrujące, ale wiąże się też z dodatkowym wykorzystaniem procesora i wyczerpaniem baterii w celu ponownego ułożenia i odmalowania strony.
Ulepszona współpraca z Safari na iOS. Nowy model powinien być zgodny z działaniem Safari, by ułatwić życie programistom stron internetowych. Nieintuicyjny wybór polegający na ustawieniu jednostek
vhjako największego możliwego widocznego obszaru, ale najmniejszego możliwego współczynnika ICB, polega na uwzględnieniu zachowania w przeglądarce Safari.
W sytuacjach, gdy pasek adresu URL jest ukryty, ICB użyje wysokości pełnej ekranu. Jest to zgodne z definicjami powyżej, ponieważ „najmniejszy możliwy widoczny obszar” oznacza cały widoczny obszar, ponieważ pasek adresu URL nie wyświetla się podczas przewijania.
Pokaz
- Oto prezentacja.
Cztery słupki po prawej stronie to wszystkie możliwe kombinacje wartości
99%,99vh,position:fixediposition:absoluteznajdujące się na stronie, którą można przewijać. Ukrycie paska adresu URL pokazuje, jaki to ma wpływ na poszczególne adresy. Zdarzenia zmiany rozmiaru zostaną wydrukowane na dole strony.
Pomoc
- Chrome 56 na Androida.