Opublikowano: 28 lutego 2025 r.
Wyświetlanie od krawędzi do krawędzi to funkcja Androida, która umożliwia aplikacjom wyświetlanie treści na całej szerokości i wysokości ekranu, ponieważ są one rysowane za paskami systemu Android.
W wersjach wcześniejszych niż Chrome 135 przeglądarka Chrome na Androidzie nie wyświetlała treści od krawędzi do krawędzi. Z tego przewodnika dowiesz się, jak ta zmiana wpłynie na witryny i co możesz zrobić jako deweloper, aby się do niej dostosować.
Bary wszędzie
Android zawiera paski systemu udostępniane przez sam system operacyjny.
Pasek stanu, pasek podpisów i pasek nawigacyjny są razem nazywane paskami systemu. Wyświetlają ważne informacje, takie jak poziom baterii, godzina i powiadomienia, a także umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.
U góry ekranu znajduje się pasek stanu, który zawiera ikony powiadomień i ikony systemowe.
U dołu ekranu znajduje się pasek nawigacyjny, który umożliwia sterowanie nawigacją za pomocą przycisków wstecz, ekranu głównego i przeglądu. Może to być klasyczna nawigacja przy użyciu 3 przycisków lub nowoczesny pasek nawigacji przy użyciu gestów.
Oprócz pasków systemu Android Chrome ma też pasek adresu, który dynamicznie rozwija się i zwija podczas przewijania.
Chrome od krawędzi do krawędzi
Gdy wchodzisz na stronę internetową, jest ona wyświetlana w prostokącie zwanym okienkiem (układu).
W Chrome na Androida (w wersjach starszych niż Chrome 135) ten widoczny obszar układu jest rysowany między górnym paskiem stanu a dolnym paskiem nawigacji przy użyciu gestów. Obecność paska adresu Chrome (lub jego brak) może wpływać na rozmiar widocznego obszaru, ale widoczny obszar nigdy nie rozszerzy się na górny pasek systemowy ani dolny pasek nawigacji przy użyciu gestów.
Od wersji Chrome 135 widoczny obszar może rozciągać się na pasek nawigacji przy użyciu gestów na Androidzie. Jest to tzw. wyświetlanie bez ramki.
Zachowanie Chrome bez wyświetlania bez ramki
Na tym nagraniu widać Chrome na Androidzie bez obsługi trybu od brzegu do brzegu. Pasek adresu Chrome (u góry) dynamicznie znika podczas przewijania strony. Jednak górny pasek stanu i dolny pasek nawigacyjny systemu Android pozostają na swoim miejscu.
W tym przypadku rozmiar widocznego obszaru układu zmienia się, gdy pasek adresu Chrome się zwija lub rozwija.
Działanie Chrome w trybie bez ramki
Od wersji Chrome 135 przeglądarka może wyświetlać treści z internetu aż do dolnej krawędzi urządzenia, rozszerzając obszar widoczny na obszar paska nawigacji przy użyciu gestów.
Dynamiczny ekran od krawędzi do krawędzi z „podbródkiem”
Domyślnie Chrome od krawędzi do krawędzi wyświetla nowy dynamiczny pasek dolny, znany jako „podbródek”, nad obszarem paska nawigacji przy użyciu gestów. Podobnie jak pasek adresu Chrome, ten element znika, gdy zaczynasz przewijać, i wpływa na rozmiar widocznego obszaru.
Na poniższym nagraniu Chrome na Androidzie z obsługą trybu od krawędzi do krawędzi pasek adresu Chrome i dolny pasek dynamicznie się chowają, gdy strona jest przewijana w dół. Powoduje to rozszerzenie widocznego obszaru, co umożliwia wyświetlanie treści z internetu aż do dolnej krawędzi urządzenia.
To zachowanie jest nowym domyślnym zachowaniem Chrome od wersji 135.
Domyślne wyświetlanie od krawędzi do krawędzi z możliwością rezygnacji
Witryny, które zostały utworzone z myślą o wyświetlaniu od krawędzi do krawędzi, mogą to wskazywać, dostosowując metatag viewport. Gdy ta opcja jest włączona, widoczny obszar domyślnie rozciąga się do dolnej krawędzi, a dolny pasek nie jest widoczny.
Strona może wskazywać, że obsługuje tryb od krawędzi do krawędzi, za pomocą metatagu viewport i klucza viewport-fit.
Aby włączyć tryb od krawędzi do krawędzi, ustaw viewport-fit na wartość cover.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Więcej informacji o różnych wartościach viewport-fit znajdziesz na stronie MDN.
Postępowanie z treściami, które mogą być zasłonięte przez pasek nawigacji przy użyciu gestów
W trybie od krawędzi do krawędzi należy wziąć pod uwagę wszelkie treści, które mogą zostać zasłonięte przez pasek nawigacji przy użyciu gestów.
W większości przypadków nie musisz nic robić, ponieważ dolny pasek sam się przesunie. Użytkownicy nadal mogą uzyskać dostęp do wszystkich treści w Twojej witrynie, tak jak wcześniej.
Jeśli jednak domyślnie wybierzesz tryb od krawędzi do krawędzi lub masz element umieszczony u dołu widocznego obszaru, musisz wziąć pod uwagę, że ta treść może zostać zasłonięta.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Gdy pasek jest widoczny, użytkownicy mogą początkowo uzyskać dostęp do treści, ale gdy pasek znika, treści są zasłaniane przez pasek nawigacyjny Androida.
Aby rozwiązać ten problem, użyj wstawek bezpiecznego obszaru, aby zawsze umieszczać elementy, których dotyczy problem, nad natywnym paskiem nawigacji przy użyciu gestów na Androidzie lub aby ich tło rozciągało się na ten obszar.
Wstawki bezpiecznego obszaru
Wstawki bezpiecznego obszaru to 4 zmienne środowiskowe, które definiują prostokąt za pomocą górnej, prawej, dolnej i lewej wstawki od krawędzi widocznego obszaru.
Te 4 wartości tworzą prostokąt bezpiecznego obszaru, w którym można bezpiecznie umieszczać treści, aby nie były zasłaniane przez elementy takie jak pasek nawigacji przy użyciu gestów na Androidzie.
Używanie dolnej wstawki bezpiecznego obszaru
W przypadku elementów umieszczonych u dołu widocznego obszaru użyj wartości safe-area-inset-bottom dla właściwości bottom, aby zapobiec umieszczeniu ich pod paskiem nawigacji przy użyciu gestów. Wartość zwracana przez safe-area-inset-bottom jest dynamicznie aktualizowana, gdy dolny pasek się przesuwa, dzięki czemu elementy umieszczone na dole pozostają nad paskiem nawigacji przy użyciu gestów Androida.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}
bottom. Gdy jest widoczny, znajduje się nad paskiem nawigacji przy użyciu gestów na Androidzie. Gdy dolny pasek znika, element również znajduje się nad nim.Jak widać na ilustracjach, wynik nie jest jeszcze idealny: gdy usuniesz podbródek, pozostała zawartość strony stanie się widoczna w obszarze paska nawigacji przy użyciu gestów. Dzieje się tak, ponieważ w tym stanie widoczny obszar rozciąga się na obszar paska nawigacji przy użyciu gestów.
Aby zapobiec renderowaniu treści pod treściami zakotwiczonymi na dole, często stosuje się ustawienie padding-bottom na safe-area-inset-bottom. Dzięki temu element zakotwiczony u dołu automatycznie się powiększa, gdy pasek się ukrywa. Chociaż to działa, nie zalecamy tego podejścia, ponieważ powoduje ono problemy z układem, gdy dolny pasek się przesuwa.
Nie ustawiaj właściwości padding na wartość safe-area-inset.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}
Używanie dolnego wcięcia bezpiecznego obszaru i maksymalnego dolnego wcięcia bezpiecznego obszaru
Zamiast tego zalecamy użycie kombinacji filtrów safe-area-inset-bottom i safe-area-max-inset-bottom. W przeciwieństwie do dynamicznego safe-area-inset-bottom, który jest dynamicznie aktualizowany, gdy podbródek się przesuwa, safe-area-max-inset-bottom reprezentuje maksymalną wartość safe-area-inset-bottom.
Użyj tego safe-area-max-inset-bottom, aby powiększyć element zakotwiczony na dole, i połącz go z safe-area-inset-bottom, aby pociągnąć element w dół, tak aby znajdował się za brodą.
Używaj safe-area-max-inset-bottom w połączeniu z safe-area-inset-bottom.
:root {
--safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
--bottom-bar-height: 50px;
}
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
height: var(--bottom-bar-height);
padding-bottom: var(--safe-area-max-inset-bottom);
bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}
body {
padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}
Wypróbuj wersję demonstracyjną na żywo
Efekt wizualny jest taki sam jak w przypadku metody padding-bottom: env(safe-area-inset-bottom, 0px);, ale działa znacznie lepiej. Ponieważ tylko obliczona wartość bottom musi się zmienić, gdy podbródek się oddala, nie dochodzi do niszczenia układu.
Wypróbuj tryb od krawędzi do krawędzi przed Chrome 135
Aby wypróbować tryb od krawędzi do krawędzi przed jego publiczną stabilną wersją, musisz włączyć kilka flag funkcji Chrome na stronie chrome://flags:
EdgeToEdgeBottomChin(opcjonalnie ustaw „Włącz debugowanie”, aby połowa paska była różowa, co pozwoli wyraźniej odróżnić go od innych elementów interfejsu)DrawCutOutEdgeToEdgeBottomBrowserControlsRefactor(don't set to "Enabled" but set to "Enabled Dispatch yOffset")DynamicSafeAreaInsetsDynamicSafeAreaInsetsOnScrollEdgeToEdgeWebOptInDrawKeyNativeEdgeToEdgeEdgeToEdgeSafeAreaConstraint(don't set to "Enabled" but set to "Enabled Scrollable Variation")
Upewnij się, że te flagi nie są włączone:
DrawNativeEdgeToEdgeEdgeToEdgeEverywhere
Dwukrotnie uruchom ponownie Chrome.
Chcemy poznać Twoją opinię
Jeśli masz uwagi na temat Chrome i wdrożenia trybu od krawędzi do krawędzi, skontaktuj się z nami, zgłaszając błąd Chromium w komponencie „UI > Browser > Mobile > EdgeToEdge”. Twoje uwagi są dla nas bardzo ważne.