Ta strona została przetłumaczona przez Cloud Translation API.

Przewodnik po migracji z Edge do Chrome na Androida

Bramus

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.

Ilustracja górnej części urządzenia z Androidem z wyróżnionym paskiem systemowym. — Pasek stanu na Androidzie wyróżniony na *(source)*.

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.

Ilustracja dolnej części urządzenia z Androidem z widocznym paskiem nawigacji za pomocą gestów. — Pasek nawigacji przy użyciu gestów *(source)*

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.

Ilustracje urządzenia z Androidem z Chrome, które nie zajmuje całego ekranu Ilustracja po lewej stronie przedstawia Chrome z rozwiniętym paskiem adresu. Pomiędzy paskiem adresu a paskiem nawigacji za pomocą gestów znajduje się pole wyróżnione na zielono o wymiary 100 svh. Ilustracja po prawej stronie przedstawia Chrome z schowanym paskiem adresu. Pomiędzy paskiem stanu a paskiem nawigacji za pomocą gestów znajduje się pole wyróżnione na zielono o wymiarach 100 lvh. Sam widok ma przerywany niebieski kontur. — Minimalny i maksymalny rozmiar widoku w Chrome na Androida w wersjach starszych niż 135. Te rozmiary są nazywane małym i dużym widokiem. Sam widoczny obszar ma przerywany niebieski kontur.

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.

Ilustracje pola widzenia w Chrome na Androida, które nie zajmuje całego ekranu (po lewej), i w Chrome na Androida, które zajmuje cały ekran (po prawej). Każda wizualizacja ma niebieskie pole, które reprezentuje element o wysokości 100 vh. Tekst po lewej stronie wyjaśnia, co się dzieje, gdy ramka nie jest pełnoekranowa. „Przestrzeń widoku pozostaje zablokowana między górnym paskiem stanu a dolnym paskiem nawigacji”. Tekst po prawej stronie wyjaśnia, co się dzieje, gdy ramka jest od krawędzi do krawędzi. „Widoczny obszar rozciąga się na pasek nawigacji przy użyciu gestów”. — Duża widoczność w Chrome na Androidzie, która nie wypełnia ekranu (po lewej), i w Chrome (po prawej). W Chrome z obsługą wyświetlania od krawędzi do krawędzi widok rozszerza się do obszaru paska nawigacji gestów, gdy dynamiczne paski narzędzi w Chrome są schowane.

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.

Stare działanie: Chrome na Androidzie bez obsługi pełnoekranowej i z wczytaną stroną https://developer.chrome.com/.

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.

Nowe działanie: Chrome na Androida z obsługą od krawędzi do krawędzi i https://developer.chrome.com/ wczytany. Zwróć uwagę, jak dolna szczęka przesuwa się w stronę, gdy przewijasz stronę.

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.

Nowe działanie po włączeniu wyświetlania bez ramki: po wczytaniu strony widoczny obszar sięga do dolnej krawędzi. Nie ma żuchwy.

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.

Ilustracje urządzenia z Androidem z Chrome na Androidzie, które zajmuje cały ekran. Ilustracja po lewej stronie przedstawia Chrome z widoczną szyją. Treści zakotwiczone na dole (zaznaczone na czerwono) znajdują się tuż nad tymi elementami. Ilustracja po prawej stronie przedstawia Chrome z niewidoczną szyją. W tym przypadku treść zadokowana na dole znajduje się przy dolnej krawędzi urządzenia. Tekst wyjaśnia, że treści znajdujące się na dole ekranu są teraz zasłonięte przez pasek nawigacji za pomocą gestów. — Ilustracja witryny z elementem u dołu z wartością „bottom: 0”. Gdy widoczny jest podbródek, element u dołu znajduje się nad paskiem nawigacyjnym Androida. Gdy żuchwa się odsunie, element zostanie umieszczony za paskiem nawigacyjnym Androida, który częściowo go zasłania.

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

Browser Support

Source

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.

Ilustracja przedstawiająca urządzenie z Androidem z Chrome w trybie pełnoekranowym. Podbródek ma widok wysuwanego menu. W Chrome widać żółty prostokąt bezpiecznej strefy. Jego dolna krawędź znajduje się tuż nad paskiem nawigacji za pomocą gestów. Na pasku nawigacji przy użyciu gestów zaznaczono niebieskim kolorem dolną część widoku. Tekst obok niego informuje, że prostokąt bezpiecznego obszaru jest w widoku wsunięty o bezpieczny obszar dolny, co zapobiega wyświetlaniu treści pod paskiem nawigacji gestów. — Ilustracja Chrome w trybie pełnoekranowym z obszarem widoku i bezpieczną strefą w żółtym kolorze. Ponieważ podbródek jest schowany, dolny wpust bezpiecznego obszaru zapobiega temu, aby prostokąt bezpiecznego obszaru nie sięgał do paska nawigacji za pomocą gestów. W efekcie pod paskiem nawigacyjnym z gestami zobaczysz podgląd widoku.

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);
}

Ilustracja przedstawiająca urządzenie z Androidem z Chrome w trybie pełnoekranowym. W wizualizacji po lewej stronie widać Chiny, a tuż nad nimi – treści zakotwiczone na dole. W wizualizacji po prawej stronie żuchwa jest niewidoczna, a treści zadokowane u dołu znajdują się w tym samym miejscu co po lewej stronie. Dzięki temu zwykłe treści są widoczne pod paskiem nawigacji za pomocą gestów. — Ilustracje witryny z elementem u dołu strony, który wykorzystuje dolny bezpieczny obszar z właściwością `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.