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 balik kolom sistem Android.

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

Bar di mana saja

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

Status bar, kolom teks, dan menu navigasi disebut sebagai kolom sistem. Widget menampilkan informasi penting seperti level baterai, waktu, dan pemberitahuan notifikasi, serta memberikan 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 ditandai.
Status bar di Android ditandai (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 menu 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 secara dinamis meluas dan menyusut saat Anda men-scroll.

Chrome menampilkan tata letak layar penuh

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

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

Ilustrasi perangkat Android dengan Chrome di Android yang tidak memenuhi layar. Ilustrasi di sebelah kiri menampilkan Chrome dengan kolom URL yang diperluas. Di antara kolom URL dan menu navigasi gestur, terdapat kotak yang ditandai dengan warna hijau yang berukuran 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 berukuran 100lvh. Area pandang itu sendiri memiliki garis tepi biru putus-putus.
Ukuran minimum dan maksimum area pandang di Chrome di Android sebelum Chrome 135. Ukuran ini dikenal sebagai area pandang kecil dan besar. Area pandang itu sendiri memiliki garis tepi biru putus-putus.

Mulai Chrome 135, area pandang diizinkan untuk diperluas ke menu navigasi gestur Android. Perilaku ini disebut sebagai layar penuh.

Ilustrasi area pandang di Chrome pada Android yang tidak memenuhi layar (di sebelah kiri) dan di Chrome pada Android yang memenuhi layar (di sebelah kanan). Setiap visualisasi memiliki kotak biru yang mewakili elemen yang berukuran tinggi 100vh. Teks di sebelah kiri menjelaskan apa yang terjadi jika chrome tidak memenuhi layar. Teksnya berbunyi 'Area pandang tetap terjepit di antara status bar atas dan menu navigasi gestur bawah'. Teks di sebelah kanan menjelaskan apa yang terjadi saat chrome ditampilkan dalam layar penuh. Teksnya berbunyi 'Area tampilan meluas ke menu navigasi gestur'.
Area pandang besar yang ditampilkan di Chrome di Android yang tidak memenuhi layar (kiri) dan di Chrome yang memenuhi layar (kanan). Di Chrome dengan dukungan layar penuh, area pandang diperluas ke area menu navigasi gestur saat 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 menghilang saat halaman di-scroll. Namun, status bar atas native Android dan menu navigasi native 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 pandang tata letak berubah saat kolom URL Chrome ditarik atau diperluas.

Perilaku Chrome dengan tata letak layar penuh

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

Tampilan layar penuh dinamis dengan "dagu"

Secara default, Chrome edge-to-edge menampilkan panel bawah dinamis baru yang dikenal sebagai "chin" di area menu navigasi gestur. Sama seperti kolom URL Chrome, chin ini akan menghilang saat Anda mulai men-scroll dan memengaruhi ukuran area pandang.

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

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

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

Menampilkan aplikasi dalam layar penuh secara default dengan keikutsertaan

Situs yang dibuat untuk tampilan layar penuh dapat menunjukkan hal tersebut dengan mengubah tag meta viewport. Jika diaktifkan, area pandang akan diperluas hingga tepi bawah secara default tanpa menampilkan dagu.

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

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

Untuk mengaktifkan tampilan layar penuh, tetapkan viewport-fit ke nilai cover.

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

Pelajari lebih lanjut berbagai nilai viewport-fit di MDN.

Menangani konten yang mungkin terhalang oleh menu navigasi gestur

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

Biasanya, Anda tidak perlu melakukan apa pun karena dagu bawah akan bergerak sendiri. Pengguna masih dapat menjangkau semua konten di situs Anda seperti sebelumnya.

Namun, jika Anda memilih untuk menggunakan layar penuh secara default atau memiliki elemen yang diposisikan di bagian bawah area pandang, Anda mungkin perlu memperhitungkan bahwa konten tersebut berpotensi tertutup.

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

Saat chin ada, konten awalnya akan dapat dijangkau oleh pengguna, tetapi akan terhalang oleh menu navigasi Android saat chin menghilang.

Ilustrasi perangkat Android dengan Chrome di Android yang menerapkan tampilan layar penuh. Ilustrasi di sebelah kiri menampilkan Chrome dengan dagu yang terlihat. Konten yang diposisikan di bawah (ditampilkan dalam warna merah) berada tepat di atasnya. Ilustrasi di sebelah kanan menampilkan Chrome dengan dagu yang tidak terlihat. Di sana, konten yang diposisikan di bawah berada di tepi bawah perangkat. Teks yang menyertainya menjelaskan bahwa konten yang diposisikan di bawah kini terhalang oleh menu navigasi gestur.
Ilustrasi situs dengan elemen yang diposisikan di bawah dengan `bottom: 0`. Saat chin terlihat, elemen yang diposisikan di bawah berada di atas menu navigasi Android. Saat chin telah dipindahkan, elemen akan diposisikan di belakang menu navigasi Android yang mengaburkannya sebagian pada saat itu.

Untuk mengatasinya, gunakan inset area aman untuk selalu memosisikan elemen yang terpengaruh di atas menu navigasi gestur bawah native Android, atau agar latar belakangnya diperluas 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 pandang.

Gabungan keempat nilai ini membentuk persegi panjang area aman yang aman untuk menempatkan konten agar tidak terhalang oleh hal-hal seperti menu navigasi gestur Android.

Ilustrasi perangkat Android dengan Chrome dalam mode layar penuh. Dagu memiliki tampilan geser keluar. Di dalam Chrome, ditampilkan persegi panjang area aman, yang diwarnai kuning. Tepi bawahnya berada tepat di atas menu navigasi gestur. Digambar di menu navigasi gestur adalah bagian bawah area pandang, yang digambar dengan warna biru. Teks yang menyertainya menyatakan bahwa persegi panjang area aman disisipkan di area pandang oleh safe-area-bottom-inset yang mencegah konten digambar di bawah menu navigasi gestur.
Ilustrasi Chrome dalam mode layar penuh dengan area pandang dan persegi panjang area aman yang dicat kuning. Karena dagu ditarik, inset bawah area aman mencegah persegi panjang area aman menjangkau menu navigasi gestur. Hasilnya, Anda akan melihat area pandang mengintip dari bawah menu navigasi gestur tersebut.

Menggunakan inset bawah area aman

Untuk elemen yang diposisikan di bagian bawah area pandang, gunakan safe-area-inset-bottom sebagai nilai untuk properti bottom agar tidak diposisikan di bawah menu navigasi gestur. Nilai yang ditampilkan oleh safe-area-inset-bottom akan diperbarui secara dinamis saat chin bergerak, sehingga elemen yang diposisikan di bawah tetap berada di atas menu navigasi gestur Android dengan baik.

.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. Dalam visualisasi di sebelah kiri, Chin terlihat dan konten yang diposisikan di bawah berada tepat di atasnya. Dalam visualisasi di sebelah kanan, dagu tidak terlihat dan konten yang diposisikan di 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 berada di atas menu navigasi gestur Android. Saat chin hilang, elemen juga berada di atasnya.

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

Untuk mencegah konten dirender di bawah konten yang diposisikan di bawah, pendekatan yang umum digunakan adalah menetapkan padding-bottom ke safe-area-inset-bottom. Dengan begitu, elemen yang ditambatkan di bawah akan otomatis bertambah besar saat chin disembunyikan. Meskipun berhasil, pendekatan ini tidak direkomendasikan karena menyebabkan layout thrashing saat chin dipindahkan.

Jangan tetapkan padding ke nilai 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. */
}

Menggunakan inset bawah area aman dan inset maksimum bawah 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, safe-area-max-inset-bottom mewakili nilai maksimum safe-area-inset-bottom.

Gunakan safe-area-max-inset-bottom ini untuk memperbesar elemen yang diposisikan di bawah di awal, 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 yang dihitung untuk bottom yang perlu berubah saat dagu menjauh, tidak terjadi layout thrashing.

Ilustrasi perangkat Android dengan Chrome dalam mode layar penuh. Dalam visualisasi di sebelah kiri, Chin terlihat dan konten yang diposisikan di bawah berada tepat di atasnya. Dalam visualisasi di sebelah kanan, dagu tidak terlihat dan konten yang diposisikan di bawah secara visual bertambah untuk mengisi ruang tempat dagu awalnya 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 diposisikan di bawah yang memperhitungkan inset area aman. Saat dagu terlihat (kiri), elemen berada di atas dagu. Jika chin tidak terlihat, elemen akan terlihat menyatu dengan menu navigasi gestur Android.

Mencoba tampilan layar penuh sebelum Chrome 135

Untuk mencoba tampilan layar penuh sebelum rilis stabil publiknya, Anda harus mengaktifkan beberapa tombol fitur Chrome melalui chrome://flags:

  • EdgeToEdgeBottomChin (opsional, tetapkan ke "Enabled Debug" untuk mewarnai separuh chin dengan warna merah muda agar lebih jelas membedakannya dari UI lain)
  • DrawCutOutEdgeToEdge
  • BottomBrowserControlsRefactor (jangan tetapkan ke "Enabled", tetapi tetapkan ke "Enabled Dispatch yOffset")
  • DynamicSafeAreaInsets
  • DynamicSafeAreaInsetsOnScroll
  • EdgeToEdgeWebOptIn
  • DrawKeyNativeEdgeToEdge
  • EdgeToEdgeSafeAreaConstraint (jangan tetapkan ke "Enabled", tetapi tetapkan ke "Enabled Scrollable Variation")

Pastikan flag berikut tidak diaktifkan:

  • DrawNativeEdgeToEdge
  • EdgeToEdgeEverywhere

Mulai ulang Chrome dua kali.

Kami ingin masukan dari Anda

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