Data publikacji: 28 lutego 2025 r.
Wyświetlanie bez ramki to funkcja Androida, która pozwala aplikacjom zajmować całą szerokość i wysokość ekranu przez wyświetlanie obrazu za paskami systemu Androida.
Przed wersją 135 Chrome na Androida nie wyświetlał się od krawędzi do krawędzi. Z tego przewodnika dowiesz się, jaki wpływ ma ta zmiana na witryny i co możesz zrobić jako deweloper, aby ją wdrożyć.
Bary wszędzie
Android ma paski systemowe, które są dostarczane przez system operacyjny.
Pasek stanu, pasek podpisu i pasek nawigacji są nazywane paskami systemowymi. Wyświetlają ważne informacje, takie jak poziom naładowania baterii, godzina i powiadomienia, oraz umożliwiają bezpośrednią interakcję z urządzeniem z dowolnego miejsca.
U góry ekranu znajduje się pasek stanu z ikonami powiadomień i ikonami systemowymi.

U dołu ekranu znajduje się pasek nawigacyjny, który umożliwia sterowanie nawigacją za pomocą elementów sterujących Wstecz, Strona główna i Przegląd. Może to być klasyczna nawigacja za pomocą 3 przycisków lub nowoczesny pasek nawigacji za pomocą gestów.

Oprócz pasków systemu Android w Chrome jest pasek adresu, który dynamicznie się rozszerza i zwęża podczas przewijania.
Chrome w wersji pełnoekranowej
Gdy wchodzisz na stronę, jest ona wyświetlana w prostokącie zwanym widżetem (wyświetlaczem) układu.
W Chrome na Androida w wersji wcześniejszej niż 135 ten widok układu był wyświetlany między górnym paskiem stanu a dolnym paskiem nawigacji gestów. Obecność paska adresu Chrome (lub jej brak) może wpływać na rozmiar widocznego obszaru, ale nigdy nie będzie ono wykraczać poza górny pasek systemu ani dolny pasek nawigacji gestów.

Od wersji 135 Chrome widoczny obszar może się rozszerzać na pasek nawigacji gestów w Androidzie. Takie działanie nazywamy wyświetlaniem bez ramki.

Zachowanie Chrome bez wyświetlania bez ramki
Na tym nagraniu widać Chrome na Androidzie bez obsługi pełnoekranowej. Pasek adresu Chrome (u góry) znika dynamicznie podczas przewijania strony. Jednak pasek stanu i pasek nawigacyjny Androida u dołu ekranu pozostają na swoich miejscach.
Tutaj rozmiar widocznego obszaru układu zmienia się w miarę zwijania lub rozwijania paska adresu w Chrome.
Sposób działania Chrome w przypadku wyświetlania bez ramki
Od wersji 135 przeglądarka Chrome może wyświetlać treści internetowe aż do dolnej krawędzi urządzenia, rozszerzając widok do obszaru paska nawigacji za pomocą gestów.
Dynamiczna ramka od krawędzi do krawędzi z „podbródkiem”
Domyślnie Chrome wyświetla nowy dynamiczny pasek dolny znany jako „podbródek” nad obszarem paska nawigacji z gestami. Podobnie jak pasek adresu w Chrome, uchwyt znika z pola widzenia, gdy zaczniesz przewijać, i wpływa na rozmiar widocznego obszaru.
Na poniższym nagraniu Chrome na Androidzie z obsługą od krawędzi do krawędzi widać, jak pasek adresu i elementy ruchome w Chrome dynamicznie się chowają, gdy przewijasz stronę w dół. Spowoduje to rozszerzenie widoku, co pozwoli wyświetlać treści internetowe aż do dolnej krawędzi urządzenia.
To zachowanie jest nową domyślną funkcją Chrome od wersji 135.
Domyślne wyświetlanie reklam od krawędzi do krawędzi z możliwością rezygnacji
Witryny, które zostały utworzone z uwzględnieniem technologii edge-to-edge, mogą to sygnalizować, modyfikując metatag viewport
. Gdy ta opcja jest włączona, widoczny obszar będzie domyślnie sięgał do dolnej krawędzi, a podbródek nie będzie widoczny.
Strona może wskazywać, że obsługuje tryb edge-to-edge, za pomocą metatagu viewport
i klucza viewport-fit
.
Aby włączyć przesyłanie krawędzi do krawędzi, ustaw wartość parametru viewport-fit
na cover
.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Dowiedz się więcej o różnych wartościach viewport-fit
na stronie MDN.
Zarządzanie treściami, które mogą być zasłonięte przez pasek nawigacji za pomocą gestów
W trybie od krawędzi do krawędzi należy wziąć pod uwagę wszystkie treści, które mogą być zasłonięte przez pasek nawigacji przy użyciu gestów.
W większości przypadków nie musisz nic robić, ponieważ dolna szczęka sama się przesunie. Użytkownicy nadal będą mieli dostęp do wszystkich treści w Twojej witrynie.
Jeśli jednak zdecydujesz się na wyświetlanie reklam od krawędzi do krawędzi domyślnie lub masz element umieszczony na dole widoku, może być konieczne uwzględnienie tego elementu w przypadku potencjalnego zasłonięcia.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: 0;
}
Gdy jest widoczny pasek nawigacyjny, użytkownicy mogą początkowo uzyskać dostęp do treści, ale gdy pasek zniknie, będą oni blokowani przez pasek nawigacyjny Androida.

Aby temu zapobiec, użyj wstawek bezpiecznego obszaru, aby zawsze umieszczać elementy, których dotyczy problem, nad dolnym paskiem sterowania gestów w Androidzie lub aby ich tło sięgało tego obszaru.
Wstawki bezpiecznego obszaru
Zagłębienia bezpiecznego obszaru to 4 zmiennych środowiskowych, które definiują prostokąt przez zagłębienia po prawej, lewej, górze i dole od krawędzi widoku.
Te 4 wartości tworzą prostokąt bezpiecznej strefy, w której można bezpiecznie umieszczać treści, aby nie były zasłaniane przez takie elementy jak pasek nawigacji z gestami w Androidzie.

Używanie dolnego marginesu bezpiecznego obszaru
W przypadku elementów znajdujących się u dołu widocznego obszaru ustaw wartość safe-area-inset-bottom
dla właściwości bottom
, aby nie były one umieszczane pod paskiem nawigacji gestów. Wartość zwracana przez safe-area-inset-bottom
jest dynamicznie aktualizowana, gdy żuchwa się przesuwa, dzięki czemu elementy znajdujące się na dole pozostają nad paskiem nawigacji za pomocą gestów w Androidzie.
.stuck-to-the-bottom-of-the-viewport {
position: fixed;
bottom: env(safe-area-inset-bottom, 0px);
}

bottom
. Gdy żuchwa jest widoczna, pasek znajduje się nad paskiem nawigacji za pomocą gestów w Androidzie. Gdy podbródek znika, element również znika.Jak widać na ilustracjach, efekt nie jest jeszcze idealny: gdy żuchwa zostanie odsunięta, pozostała treść strony stanie się widoczna w obszarze paska nawigacji z gestami. Dzieje się tak, ponieważ w tym stanie widok rozszerza się do obszaru paska nawigacji za pomocą gestów.
Aby zapobiec wyświetlaniu treści pod treścią zadokowaną na dole, często stosuje się ustawienie padding-bottom
na safe-area-inset-bottom
. W ten sposób element zakotwiczony na dole automatycznie rośnie, gdy podbródek się chowa. To rozwiązanie działa, ale nie jest zalecane, ponieważ powoduje niestabilność układu, gdy żuchwa się porusza.
Nie ustawiaj wartości padding
na wartość zarezerwowaną dla bezpiecznej strefy.
.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 wbudowanego dolnej krawędzi bezpiecznej strefy i maksymalnego wbudowanego dolnej krawędzi bezpiecznej strefy
Zamiast tego zalecamy użycie kombinacji interfejsów safe-area-inset-bottom
i safe-area-max-inset-bottom
. W przeciwieństwie do dynamicznego parametru safe-area-inset-bottom
, który jest aktualizowany dynamicznie w miarę przesuwania się żuchwy, parametr safe-area-max-inset-bottom
reprezentuje maksymalną wartość parametru safe-area-inset-bottom
.
Użyj tego safe-area-max-inset-bottom
, aby powiększyć element zakotwiczony u dołu, i połącz go z safe-area-inset-bottom
, aby przesunąć go w dół, tak aby znajdował się za brodą.
Używaj właściwości safe-area-max-inset-bottom
w połączeniu z właściwością 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 podejścia padding-bottom: env(safe-area-inset-bottom, 0px);
, ale skuteczność jest znacznie większa. Ponieważ wraz z przesuwaniem żuchwy musi się zmieniać tylko obliczona wartość bottom
, nie dochodzi do chaotycznych zmian układu.

Wypróbuj tryb pełnoekranowy przed aktualizacją Chrome 135
Aby wypróbować tryb pełnoekranowy przed publiczną wersją stabilną, musisz włączyć kilka flag funkcji Chrome za pomocą chrome://flags
:
EdgeToEdgeBottomChin
(opcjonalnie ustaw opcję „Włączone debugowanie”, aby połowa czoła była podświetlona na różowo, co ułatwi odróżnienie od innych elementów interfejsu)DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor
(nie ustawiaj wartości „Włączone”, ale „Włączone przesunięcie w osi y”)DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint
(nie wybieraj opcji „Włączone”, ale „Włączona wersja przewijalna”)
Upewnij się, że te flagi nie są włączone:
DrawNativeEdgeToEdge
EdgeToEdgeEverywhere
Uruchom ponownie Chrome 2 razy.
Chcemy poznać Twoją opinię
Jeśli chcesz podzielić się z nami opinią na temat Chrome i wdrażania od krawędzi do krawędzi, prześlij błąd w Chromium w komponencie „UI > Browser > Mobile > EdgeToEdge”. Twoje uwagi są dla nas bardzo ważne.