Panduan migrasi dari tepi ke tepi Chrome di Android

Bramus

Dipublikasikan: 28 Februari 2025

Tampilan layar penuh adalah fitur Android yang memungkinkan aplikasi mencakup seluruh lebar dan tinggi layar dengan menggambar di belakang kolom sistem Android.

Sebelum Chrome 135, Chrome di Android tidak menggambar layar penuh. Panduan ini menjelaskan efek perubahan ini pada situs dan tindakan yang dapat Anda lakukan sebagai developer untuk menerapkan perubahan ini.

Bar di mana saja

Android dilengkapi dengan panel sistem yang disediakan oleh sistem operasi itu sendiri.

Bersama-sama, status bar, kolom teks, dan menu navigasi disebut kolom sistem. Mereka menampilkan informasi penting seperti level baterai, waktu, dan peringatan notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja.

Di bagian atas layar, Anda dapat menemukan status bar, yang berisi ikon notifikasi dan ikon sistem.

Ilustrasi bagian atas perangkat Android dengan kolom sistem yang disoroti.
Status bar di Android yang disorot (sumber).

Di bagian bawah layar, Anda dapat menemukan menu navigasi, yang memungkinkan Anda mengontrol navigasi menggunakan kontrol kembali, layar utama, dan ringkasan. Ini dapat berupa navigasi tiga tombol klasik atau kolom navigasi gestur modern.

Ilustrasi bagian bawah perangkat Android dengan menu navigasi gestur yang terlihat.
Menu navigasi gestur (sumber).

Selain kolom sistem Android, Chrome sendiri dilengkapi dengan kolom URL yang meluas dan menyusut secara dinamis saat Anda men-scroll.

Chrome ditampilkan dalam layar penuh

Saat Anda membuka situs, situs tersebut ditampilkan dalam persegi panjang yang dikenal sebagai area tampilan (tata letak).

Di Chrome untuk Android, sebelum Chrome 135, area tampilan tata letak tersebut digambar di antara status bar atas dan menu navigasi gestur bawah. Keberadaan kolom URL Chrome (atau tidak adanya kolom URL) dapat memengaruhi ukuran area pandang, tetapi area pandang tidak akan pernah meluas ke kolom sistem atas atau kolom navigasi gestur bawah.

Ilustrasi perangkat Android dengan Chrome di Android yang tidak ditampilkan di layar penuh. Ilustrasi di sebelah kiri menampilkan Chrome dengan kolom URL yang diluaskan. Di antara kolom URL dan kolom navigasi gestur terdapat kotak yang ditandai dengan warna hijau yang ukurannya 100svh. Ilustrasi di sebelah kanan menampilkan Chrome dengan kolom URL yang ditarik. Di antara status bar dan menu navigasi gestur terdapat kotak yang ditandai dengan warna hijau yang ukurannya 100lvh. Viewport itu sendiri memiliki garis putus-putus berwarna biru.
Ukuran minimum dan maksimum area tampilan di Chrome di Android sebelum Chrome 135. Ukuran ini dikenal sebagai area pandang kecil dan besar. Viewport itu sendiri memiliki garis putus-putus berwarna biru.

Mulai Chrome 135, area tampilan dapat diperluas ke kolom navigasi gestur Android. Perilaku ini dijelaskan sebagai layar penuh.

Ilustrasi area tampilan di Chrome untuk Android yang tidak ditampilkan di layar penuh (di sebelah kiri) dan di Chrome untuk Android yang ditampilkan di layar penuh (di sebelah kanan). Setiap visualisasi memiliki kotak biru yang merepresentasikan elemen yang berukuran tinggi 100vh. Teks di sebelah kiri menjelaskan apa yang terjadi saat Chrome tidak ditampilkan di layar penuh. Pernyataan tersebut berbunyi 'Viewport tetap diapit di antara status bar atas dan menu navigasi gestur bawah'. Teks di sebelah kanan menjelaskan apa yang terjadi saat Chrome ditampilkan dalam layar penuh. Tulisannya adalah 'Area tampilan meluas ke menu navigasi gestur'.
Viewport besar yang ditampilkan di Chrome di Android yang tidak ditampilkan di layar penuh (kiri) dan di Chrome yang ditampilkan di layar penuh (kanan). Di Chrome dengan dukungan layar penuh, area tampilan diperluas ke area kolom navigasi gestur saat kolom toolbar dinamis Chrome ditarik.

Perilaku Chrome tanpa tata letak layar penuh

Rekaman berikut menunjukkan Chrome di Android tanpa dukungan layar penuh, kolom URL Chrome (di bagian atas) secara dinamis keluar dari tampilan saat halaman di-scroll. Namun, status bar atas bawaan Android dan menu navigasi bawaan Android di bagian bawah tetap berada di tempatnya.

Perilaku lama: Chrome di Android tanpa dukungan layar penuh dan https://developer.chrome.com/ dimuat.

Di sini, ukuran area tampilan tata letak berubah saat kolom URL Chrome ditarik atau diperluas.

Perilaku Chrome dengan layar penuh

Mulai Chrome 135, Chrome dapat menggambar konten web hingga ke tepi bawah perangkat dengan memperluas area tampilan ke area kolom navigasi gestur.

Layar penuh dinamis dengan "dagu"

Secara default, Chrome layar penuh menampilkan kolom bawah dinamis baru yang dikenal sebagai "dagu" di area kolom navigasi gestur. Sama seperti kolom URL Chrome, dagu ini akan bergerak ke luar saat Anda mulai men-scroll dan memengaruhi ukuran area tampilan.

Dalam rekaman Chrome di Android berikut dengan dukungan layar penuh, kolom URL dan dagu Chrome akan ditarik secara dinamis saat halaman di-scroll ke bawah. Hal ini menyebabkan viewport meluas, sehingga konten web dapat ditarik hingga ke tepi bawah perangkat.

Perilaku baru: Chrome di Android dengan dukungan layar penuh dan https://developer.chrome.com/ dimuat. Perhatikan bagaimana dagu bawah bergeser keluar saat halaman digulirkan.

Perilaku dagu ini adalah perilaku Chrome default baru mulai Chrome 135 dan seterusnya.

Menampilkan layar penuh secara default dengan keikutsertaan

Situs yang dibuat untuk tampilan layar penuh dapat menunjukkannya dengan mengubah tag meta viewport. Jika diaktifkan, area tampilan akan diperluas hingga tepi bawah secara default tanpa dagu terlihat.

Perilaku baru dengan keikutsertaan layar penuh: Area tampilan diperluas hingga tepi bawah saat pemuatan halaman. Tidak ada dagu.

Halaman dapat menunjukkan bahwa halaman tersebut mendukung tampilan layar penuh menggunakan tag meta viewport dan kunci viewport-fit-nya.

Untuk memilih ikut serta dalam tampilan layar penuh, tetapkan viewport-fit ke nilai cover.

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

Pelajari lebih lanjut berbagai nilai viewport-fit di MDN.

Menangani konten yang mungkin terhalang oleh kolom navigasi gestur

Dalam mode layar penuh, Anda harus mempertimbangkan konten apa pun yang mungkin terhalang oleh menu navigasi gestur.

Dalam sebagian besar kasus, Anda tidak perlu melakukan apa pun karena dagu bawah akan bergerak sendiri. Pengguna tetap dapat mengakses semua konten di situs Anda seperti sebelumnya.

Namun, jika Anda memilih untuk menampilkan konten di layar penuh secara default atau memiliki elemen yang diposisikan di bagian bawah area tampilan, Anda mungkin perlu memperhitungkan potensi konten tersebut tertutup.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

Saat dagu hadir, konten awalnya dapat dijangkau oleh pengguna, tetapi akan terhalang oleh panel navigasi Android saat dagu hilang.

Ilustrasi perangkat Android dengan Chrome di Android yang ditampilkan dalam layar penuh. Ilustrasi di sebelah kiri menampilkan Chrome dengan bagian bawah yang terlihat. Konten yang berlabuh di bawah (ditampilkan dalam warna merah) berada tepat di atasnya. Ilustrasi di sebelah kanan menunjukkan Chrome tanpa dagu. Di sana, konten yang ditempatkan di bagian bawah akan berada di tepi bawah perangkat. Teks tersebut bersama dengan gambar memperjelas bahwa konten yang diposisikan di bagian bawah kini terhalang oleh menu navigasi gestur.
Ilustrasi situs dengan elemen yang diposisikan di bawah dengan `bottom: 0`. Saat dagu terlihat, elemen yang diposisikan di bawah berada di atas menu navigasi Android. Saat dagu menjauh, elemen akan diposisikan di belakang panel navigasi Android yang sebagian menutupi elemen tersebut pada saat itu.

Untuk memitigasi, gunakan inset area aman untuk selalu memosisikan elemen yang terpengaruh di atas kolom navigasi gestur bawah bawaan Android, atau agar latar belakangnya meluas ke area tersebut.

Inset area aman

Inset area aman adalah empat variabel lingkungan yang menentukan persegi panjang berdasarkan inset atas, kanan, bawah, dan kirinya dari tepi area tampilan.

Keempat nilai ini bersama-sama membentuk persegi panjang area aman tempat konten dapat ditempatkan dengan aman sehingga tidak terhalang oleh hal-hal seperti menu navigasi gestur Android.

Ilustrasi perangkat Android dengan Chrome dalam mode layar penuh. Dagu memiliki tampilan slide keluar. Di dalam Chrome, ditampilkan persegi panjang area aman yang berwarna kuning. Tepi bawahnya berada tepat di atas menu navigasi gestur. Bagian bawah area tampilan yang dicat di menu navigasi gestur berwarna biru. Teks beserta kode tersebut menyatakan bahwa persegi panjang area aman disisipkan di area tampilan dengan inset bawah area aman yang mencegah konten digambar di bawah menu navigasi gestur.
Ilustrasi Chrome dalam mode layar penuh dengan area tampilan dan persegi panjang area aman yang diwarnai kuning. Karena dagu ditarik, inset bawah area aman mencegah persegi panjang area aman mencapai kolom navigasi gestur. Akibatnya, Anda akan melihat intipan area tampilan dari bawah menu navigasi gestur tersebut.

Menggunakan inset bawah area aman

Untuk elemen yang diposisikan di bagian bawah area tampilan, gunakan safe-area-inset-bottom sebagai nilai untuk properti bottom agar tidak diposisikan di bawah panel navigasi gestur. Nilai yang ditampilkan oleh safe-area-inset-bottom diperbarui secara dinamis saat dagu bergerak menjauh, sehingga elemen yang diposisikan di bawah tetap berada di atas kolom navigasi gestur Android.

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}
Ilustrasi perangkat Android dengan Chrome dalam mode layar penuh. Pada visualisasi di sebelah kiri, Dagu terlihat dan konten yang ditambatkan di bawah berada tepat di atasnya. Pada visualisasi di sebelah kanan, dagu tidak terlihat dan konten yang ditambatkan di bagian bawah diposisikan di tempat yang sama dengan yang di sebelah kiri. Hal ini menyebabkan konten reguler terlihat dari bawah menu navigasi gestur.
Ilustrasi situs dengan elemen yang diposisikan di bawah yang menggunakan inset area aman bawah dengan properti bottom. Saat dagu terlihat, panel akan berada di atas panel navigasi gestur Android. Saat dagu hilang, elemen juga berada di atasnya.

Seperti yang dapat Anda lihat dalam ilustrasi, hasilnya belum sempurna: saat dagu dipindahkan, konten halaman yang tersisa akan terlihat di area kolom navigasi gestur. Hal ini karena dalam status ini, area tampilan meluas ke area menu navigasi gestur.

Untuk mencegah konten dilukis di bawah konten yang berlabuh di bawah, pendekatan yang umum digunakan adalah menyetel padding-bottom ke safe-area-inset-bottom. Dengan begitu, elemen yang berlabuh di bagian bawah akan otomatis bertambah besar saat dagu menyembunyikan dirinya. Meskipun berhasil, pendekatan ini tidak direkomendasikan karena menyebabkan penyusunan ulang tata letak saat dagu bergerak menjauh.

Jangan tetapkan padding ke nilai inset area aman.

.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. */
}

Menggunakan inset bawah area aman dan inset bawah maksimum area aman

Sebagai gantinya, pendekatan yang direkomendasikan adalah menggunakan kombinasi safe-area-inset-bottom dan safe-area-max-inset-bottom. Tidak seperti safe-area-inset-bottom dinamis yang diperbarui secara dinamis saat dagu bergerak menjauh, safe-area-max-inset-bottom mewakili nilai maksimum safe-area-inset-bottom.

Gunakan safe-area-max-inset-bottom ini untuk memperbesar elemen yang berlabuh di bawah di bagian depan, dan gabungkan dengan safe-area-inset-bottom untuk menarik elemen ke bawah sehingga berada di belakang dagu.

Gunakan safe-area-max-inset-bottom bersama dengan 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));
}

Coba demo langsung

Hasil visualnya sama dengan pendekatan padding-bottom: env(safe-area-inset-bottom, 0px);, tetapi performanya jauh lebih baik. Karena hanya nilai terhitung untuk bottom yang perlu berubah saat dagu menjauh, tidak ada thrashing tata letak.

Ilustrasi perangkat Android dengan Chrome dalam mode layar penuh. Pada visualisasi di sebelah kiri, Dagu terlihat dan konten yang ditambatkan di bawah berada tepat di atasnya. Dalam visualisasi di sebelah kanan, dagu tidak terlihat dan konten yang berlabuh di bawah secara visual bertambah besar untuk mengisi ruang tempat dagu berada. Hal ini menghasilkan efek visual yang bagus dan mencegah konten halaman biasa terlihat dari bawah area menu navigasi gestur.
Ilustrasi situs dengan elemen yang ditambatkan di bagian bawah yang memperhitungkan inset area aman. Saat dagu terlihat (kiri), elemen berada di atas dagu. Jika dagu tidak terlihat, elemen akan terlihat menyatu dengan kolom navigasi gestur Android.

Mencoba tampilan layar penuh sebelum Chrome 135

Untuk mencoba tampilan layar penuh sebelum rilis stabilnya untuk publik, Anda harus mengaktifkan beberapa tanda fitur Chrome melalui chrome://flags:

  • EdgeToEdgeBottomChin (opsional, setel ke "Aktifkan Debug" akan mewarnai setengah dagu dengan warna merah muda agar lebih jelas dibedakan dari UI lainnya)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (jangan setel ke "Diaktifkan", tetapi setel ke "Diaktifkan Pengiriman yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (jangan tetapkan ke "Diaktifkan", tetapi tetapkan ke "Variasi yang Dapat Di-scroll Diaktifkan")

Pastikan flag berikut tidak diaktifkan:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Mulai ulang Chrome dua kali.

Kami ingin masukan dari Anda

Jika ada masukan tentang Chrome dan implementasi layar penuhnya, hubungi kami dengan melaporkan bug Chromium di komponen "UI > Browser > Mobile > EdgeToEdge". Kami sangat menghargai masukan yang Anda berikan.