Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Przewodnik po migracji z Edge do Chrome na Androida

Bramus

Data publikacji: 28 lutego 2025 r.

Wyświetlanie od krawędzi do krawędzi to funkcja Androida, która umożliwia aplikacjom zajmowanie całej szerokości i wysokości wyświetlacza przez rysowanie za paskami systemu Android.

W wersjach Chrome na Androida wcześniejszych niż 135 przeglądarka nie rysowała obrazu od krawędzi do krawędzi. Z tego przewodnika dowiesz się, jak ta zmiana wpływa na witryny i co możesz zrobić jako deweloper, aby się do niej dostosować.

Bary wszędzie

Android ma paski systemowe 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, na którym są ikony powiadomień i ikony systemowe.

Ilustracja górnej części urządzenia z Androidem z podświetlonym paskiem systemowym. — Pasek stanu na Androidzie *(źródło)*.

U dołu ekranu znajduje się pasek nawigacji, który umożliwia sterowanie nawigacją za pomocą przycisków Wstecz, Ekran główny i Przegląd. Może to być klasyczna nawigacja przy użyciu 3 przycisków lub nowoczesna nawigacja przy użyciu gestów.

Ilustracja przedstawiająca dolną część urządzenia z Androidem z widocznym paskiem nawigacji przy użyciu gestów. — Pasek nawigacji przy użyciu gestów *(źródło)*.

Oprócz pasków systemowych Androida Chrome ma pasek adresu, który dynamicznie rozszerza się i zwija podczas przewijania.

Chrome zajmuje cały ekran

Gdy wchodzisz na stronę internetową, jest ona wyświetlana w prostokącie zwanym obszarem widoku (układu).

W Chrome na Androidzie przed wersją 135 obszar widoku układu jest rysowany między górnym paskiem stanu a dolnym paskiem nawigacji gestami. Obecność paska adresu Chrome (lub jego brak) może wpływać na rozmiar widocznego obszaru, ale nigdy nie będzie on rozszerzany na górny pasek systemu ani dolny pasek nawigacji przy użyciu gestów.

Ilustracje urządzenia z Androidem z Chrome na Androida, która nie jest wyświetlana od krawędzi do krawędzi. Ilustracja po lewej stronie przedstawia Chrome z rozwiniętym paskiem adresu. Pomiędzy paskiem adresu a paskiem nawigacji przy użyciu gestów znajduje się pole wyróżnione na zielono o rozmiarze 100 svh. Ilustracja po prawej stronie przedstawia Chrome z paskiem adresu schowanym u góry. Pomiędzy paskiem stanu a paskiem nawigacji przy użyciu gestów znajduje się pole wyróżnione na zielono o rozmiarze 100 lvh. Sam obszar widoku ma niebieski przerywany kontur. — Minimalny i maksymalny rozmiar obszaru wyświetlania w Chrome na Androida przed wersją 135. Są to mały i duży obszar widoku. Sam obszar widoku ma niebieski przerywany kontur.

Od Chrome 135 widoczny obszar może rozciągać się na pasek nawigacji przy użyciu gestów Androida. Jest to zachowanie określane jako wyświetlanie bez ramki.

Ilustracje obszaru wyświetlania w Chrome na Androidzie, który nie jest wyświetlany od krawędzi do krawędzi (po lewej), oraz w Chrome na Androidzie, który jest wyświetlany od krawędzi do krawędzi (po prawej). Każda wizualizacja zawiera niebieskie pole, które reprezentuje element o wysokości 100 vh. Tekst po lewej stronie wyjaśnia, co się dzieje, gdy Chrome nie jest wyświetlany od krawędzi do krawędzi. Wyświetla się komunikat „Widoczny obszar pozostaje ograniczony przez górny pasek stanu i dolny pasek nawigacji przy użyciu gestów”. Tekst po prawej stronie wyjaśnia, co się dzieje, gdy Chrome jest wyświetlany od krawędzi do krawędzi. Wyświetla się komunikat „Widoczny obszar rozciąga się na pasek nawigacji przy użyciu gestów”. — Duży obszar wyświetlania w Chrome na Androida, który nie jest wyświetlany od krawędzi do krawędzi (po lewej), oraz w Chrome, który jest wyświetlany od krawędzi do krawędzi (po prawej). W Chrome z obsługą od krawędzi do krawędzi widoczny obszar rozciąga się na obszar paska nawigacji przy użyciu gestów, gdy dynamiczne paski narzędzi Chrome są zwinięte.

Zachowanie Chrome bez wyświetlania bez ramki

Poniższe nagranie pokazuje Chrome na Androidzie bez obsługi pełnego ekranu. Pasek adresu Chrome (u góry) dynamicznie znika podczas przewijania strony. Jednak natywny pasek stanu Androida u góry i natywny pasek nawigacyjny Androida u dołu pozostają na swoim miejscu.

Stare działanie: Chrome na Androida bez obsługi pełnego ekranu i załadowana strona https://developer.chrome.com/.

W tym przypadku rozmiar widocznego obszaru układu zmienia się, gdy pasek adresu Chrome zwija się lub rozwija.

Działanie Chrome w przypadku wyświetlania bez ramki

Od wersji 135 Chrome może rysować treści internetowe aż do dolnej krawędzi urządzenia, rozszerzając obszar widoku na obszar paska nawigacji przy użyciu gestów.

Dynamiczny od krawędzi do krawędzi z „podbródkiem”

Domyślnie Chrome od krawędzi do krawędzi wyświetla nowy dynamiczny pasek dolny, zwany „podbródkiem”, nad obszarem paska nawigacji przy użyciu gestów. Podobnie jak pasek adresu w Chrome, ten obszar znika, 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 zarówno pasek adresu Chrome, jak i dolna krawędź dynamicznie chowają się podczas przewijania strony w dół. Powoduje to rozszerzenie obszaru widocznego, dzięki czemu treści internetowe mogą być wyświetlane aż do dolnej krawędzi urządzenia.

Nowe działanie: Chrome na Androida z obsługą od krawędzi do krawędzi i załadowaną stroną https://developer.chrome.com/. Zwróć uwagę, jak dolny pasek przesuwa się na bok podczas przewijania strony.

To zachowanie jest domyślne w Chrome od wersji 135.

Domyślne wyświetlanie od krawędzi do krawędzi z możliwością rezygnacji

Witryny utworzone z myślą o wyświetlaniu na pełnym ekranie mogą to wskazać, modyfikując metatag viewport. Gdy ta opcja jest włączona, obszar wyświetlania domyślnie rozciąga się do dolnej krawędzi, a podbródek nigdy nie jest widoczny.

Nowe działanie po wyrażeniu zgody na wyświetlanie bez ramki: po wczytaniu strony widoczny obszar rozciąga się do dolnej krawędzi. Brak podbródka.

Strona może wskazywać, że obsługuje wyświetlanie od krawędzi do krawędzi, za pomocą metatagu viewport i jego klucza viewport-fit.

Aby włączyć wyświetlanie od krawędzi do krawędzi, ustaw wartość viewport-fit na cover.

<meta name="viewport" content="width=device-width, initial-scale=1, viewpo>rt-fit=cover" /

Więcej informacji o różnych wartościach viewport-fit znajdziesz w MDN.

Radzenie sobie 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ę 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 krawędź sama się odsunie. Użytkownicy nadal mogą uzyskiwać dostęp do wszystkich treści w Twojej witrynie tak jak wcześniej.

Jeśli jednak domyślnie włączysz wyświetlanie od krawędzi do krawędzi lub masz element umieszczony u dołu obszaru widocznego, 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 podbródek jest widoczny, użytkownicy będą mogli początkowo uzyskać dostęp do treści, ale gdy podbródek zniknie, treść zostanie zasłonięta przez pasek nawigacyjny Androida.

Ilustracje przedstawiające urządzenie z Androidem z Chrome na Androida, który wyświetla się bez ramki. Ilustracja po lewej stronie przedstawia Chrome z widoczną dolną krawędzią. Treści zakotwiczone u dołu (na czerwono) znajdują się tuż nad nią. Ilustracja po prawej stronie przedstawia Chrome bez widocznej dolnej krawędzi. Treści zakotwiczone u dołu są tam umieszczone przy dolnej krawędzi urządzenia. Tekst wyjaśnia, że treści znajdujące się u dołu są teraz zasłonięte przez pasek nawigacji przy użyciu gestów. — Ilustracja przedstawiająca witrynę z elementem umieszczonym u dołu z wartością `bottom: 0`. Gdy widoczna jest dolna część ekranu, element umieszczony u dołu znajduje się nad paskiem nawigacyjnym Androida. Gdy podbródek się oddali, element zostanie umieszczony za paskiem nawigacyjnym Androida, który w tym momencie częściowo go zasłania.

Aby temu zapobiec, użyj wcięć w obszarze bezpiecznym, aby zawsze umieszczać elementy, których dotyczy problem, nad paskiem nawigacji przy użyciu gestów u dołu ekranu 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ą wstawek od góry, prawej, dołu i lewej krawędzi widocznego obszaru.

Te 4 wartości tworzą prostokąt bezpiecznego obszaru, w którym można umieszczać treści bez obawy, że zostaną zasłonięte przez elementy takie jak pasek nawigacji gestami na Androidzie.

Ilustracja urządzenia z Androidem z Chrome w trybie pełnoekranowym. Podbródek ma wysuwany widok. W Chrome widoczny jest prostokąt bezpiecznej strefy w kolorze żółtym. Jego dolna krawędź znajduje się tuż nad paskiem nawigacji przy użyciu gestów. Na pasku nawigacji przy użyciu gestów w kolorze niebieskim jest namalowana dolna część obszaru wyświetlania. Tekst informuje, że prostokąt bezpiecznego obszaru jest wstawiony w widoczny obszar przez bezpieczny obszar u dołu, co zapobiega rysowaniu treści pod paskiem nawigacji przy użyciu gestów. — Ilustracja przedstawiająca Chrome w trybie od krawędzi do krawędzi z obszarem widoku i bezpieczną strefą w postaci prostokąta w kolorze żółtym. Ponieważ podbródek jest cofnięty, dolna wstawka bezpiecznego obszaru zapobiega sięganiu prostokąta bezpiecznego obszaru do paska nawigacji przy użyciu gestów. W rezultacie zobaczysz pod paskiem nawigacji przy użyciu gestów podgląd widocznego obszaru.

Korzystanie z dolnego wcięcia bezpiecznego obszaru

W przypadku elementów, które są umieszczone u dołu widocznego obszaru, użyj wartości safe-area-inset-bottom we 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 podbródek się przesuwa, dzięki czemu elementy umieszczone u dołu 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);
}

Ilustracja urządzenia z Androidem z Chrome w trybie pełnoekranowym. Na wizualizacji po lewej stronie widoczny jest podbródek, a treść zakotwiczona u dołu znajduje się tuż nad nim. Na wizualizacji po prawej stronie podbródek jest niewidoczny, a treści zakotwiczone u dołu znajdują się w tym samym miejscu co po lewej stronie. Powoduje to, że zwykłe treści są widoczne spod paska nawigacji przy użyciu gestów. — Ilustracje przedstawiające witrynę z elementem umieszczonym u dołu, który korzysta z wstawki dolnej strefy bezpiecznej z właściwością `bottom`. Gdy podbródek jest widoczny, pasek znajduje się nad paskiem nawigacji przy użyciu gestów Androida. Gdy podbródek znika, element również znajduje się nad nim.

Jak widać na ilustracjach, efekt nie jest jeszcze idealny: gdy podbródek zostanie przesunięty, pozostała część strony staje 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 wyświetlaniu treści pod elementami zakotwiczonymi u dołu, często stosuje się ustawienie padding-bottom na safe-area-inset-bottom. W ten sposób element zakotwiczony u dołu automatycznie powiększa się, gdy podbródek się chowa. Chociaż to działa, nie zalecamy tego podejścia, ponieważ powoduje ono przeskakiwanie układu, gdy podbródek się odsuwa.

Nie ustawiaj wartoś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. */
}

Korzystanie z dolnego marginesu bezpiecznego obszaru i maksymalnego dolnego marginesu bezpiecznego obszaru

Zamiast tego zalecamy używanie kombinacji filtró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, gdy broda się odsuwa, parametr safe-area-max-inset-bottom reprezentuje maksymalną wartość parametru safe-area-inset-bottom.

Użyj tego safe-area-max-inset-bottom, aby z góry powiększyć element zakotwiczony u dołu, i połącz go z safe-area-inset-bottom, aby przesunąć element w dół tak, aby znajdował się za podbródkiem.

Użyj znaku safe-area-max-inset-bottom w połączeniu ze znakiem 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

Wynik wizualny jest taki sam jak w przypadku podejścia padding-bottom: env(safe-area-inset-bottom, 0px);, ale działa znacznie lepiej. Ponieważ w miarę oddalania się podbródka zmieniać się musi tylko obliczona wartość bottom, nie dochodzi do thrashingu układu.

Wypróbuj tryb od krawędzi do krawędzi przed Chrome 135

Aby wypróbować tę funkcję przed jej publicznym udostępnieniem w stabilnej wersji, musisz włączyć kilka flag funkcji Chrome w chrome://flags:

EdgeToEdgeBottomChin (opcjonalnie możesz ustawić wartość „Włączono debugowanie”, aby pokolorować połowę podbródka na różowo i wyraźniej odróżnić go od innych elementów interfejsu)
DrawCutOutEdgeToEdge
BottomBrowserControlsRefactor (nie ustawiaj wartości „Włączone”, tylko „Włączone z przesunięciem y”)
DynamicSafeAreaInsets
DynamicSafeAreaInsetsOnScroll
EdgeToEdgeWebOptIn
DrawKeyNativeEdgeToEdge
EdgeToEdgeSafeAreaConstraint (nie ustawiaj wartości „Włączone”, ale „Włączone – wersja z możliwością przewijania”)

Upewnij się, że te flagi nie są włączone:

DrawNativeEdgeToEdge
EdgeToEdgeEverywhere

Uruchom ponownie Chrome 2 razy.

Chcemy poznać Twoją opinię

Jeśli masz uwagi na temat Chrome i jego implementacji 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.