Panduan migrasi dari tepi ke tepi Chrome di Android

Bramus

Dipublikasikan: 28 Februari 2025

Layar penuh adalah fitur Android yang memungkinkan aplikasi menjangkau seluruh lebar dan tinggi layar dengan menggambar di balik kolom sistem Android.

Sebelum Chrome 135, Chrome di Android tidak menggambar dari tepi ke tepi. Panduan ini menjelaskan pengaruh perubahan ini terhadap situs dan tindakan yang dapat Anda lakukan sebagai developer untuk mengadopsi perubahan ini.

Catatan: Perubahan di Chrome 135 menargetkan perangkat layar kecil. Chrome di Android yang berjalan di perangkat layar besar saat ini dikecualikan, dan akan ditangani dalam rilis Chrome mendatang.

Catatan: Fitur ini diluncurkan menggunakan Variasi Chrome. Oleh karena itu, Anda mungkin melihatnya di Chrome versi sebelumnya.

Bar di mana saja

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

Status bar, kolom teks, dan menu navigasi secara bersama-sama disebut kolom sistem. Layar tersebut menampilkan informasi penting seperti level baterai, waktu, dan notifikasi, serta memberikan interaksi langsung dengan perangkat dari mana saja.

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

Panel status di Android ditandai (source).

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

Menu navigasi gestur (source).

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

Chrome menampilkan tata letak layar penuh

Saat Anda mengunjungi situs, situs tersebut akan ditampilkan dalam persegi panjang yang dikenal sebagai tampilan (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. Kehadiran kolom URL Chrome (atau tidak adanya) dapat memengaruhi ukuran area pandang, tetapi area pandang tidak akan pernah diperluas ke panel sistem atas atau menu navigasi gestur bawah.

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 batas biru putus-putus.

Mulai Chrome 135, area pandang diizinkan untuk diperluas ke menu navigasi gestur Android. Ini adalah perilaku yang dijelaskan sebagai layar penuh.

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.

Catatan: Chrome di iOS menambahkan dukungan layar penuh dengan rilis iOS 11.3. Rekomendasi dalam panduan ini juga berlaku untuk Chrome yang berjalan di iOS.

Perilaku Chrome tanpa tata letak layar penuh

Rekaman berikut menunjukkan Chrome di Android tanpa dukungan layar penuh. Kolom URL Chrome (di bagian atas) akan secara dinamis keluar dari jalan saat halaman di-scroll. Namun, status bar atas native Android dan menu navigasi native Android di bagian bawah tetap tetap 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 diluaskan.

Perilaku Chrome dengan tata letak layar penuh

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

Layar penuh dinamis dengan "dagu"

Secara default, Chrome layar penuh menampilkan panel bawah dinamis baru yang dikenal sebagai "dagu" di atas area menu navigasi gestur. Sama seperti kolom URL Chrome, bagian bawah ini akan bergeser saat Anda mulai men-scroll dan memengaruhi ukuran area pandang.

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

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

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

Menggunakan layar penuh secara default dengan keikutsertaan

Situs yang dibuat untuk layar penuh dapat menunjukkannya dengan menyesuaikan tag meta viewport. Jika diaktifkan, area pandang akan meluas hingga ke tepi bawah secara default tanpa membuat bagian bawah terlihat.

Perilaku baru dengan keikutsertaan tata letak layar penuh: Area pandang diperluas hingga ke tepi bawah saat halaman dimuat. Tidak ada dagu.

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

Untuk memilih ikut serta dalam fitur 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.

Pada umumnya, Anda tidak perlu melakukan apa pun karena dagu bawah akan bergeser dengan sendirinya. Pengguna masih dapat mengakses semua konten di situs Anda seperti sebelumnya.

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

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

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

Ilustrasi situs dengan elemen yang diposisikan di bagian bawah dengan `bottom: 0`. Saat dagu terlihat, elemen yang diposisikan di bagian bawah akan berada di atas menu navigasi Android. Saat dagu telah dipindahkan, elemen akan diposisikan di belakang menu navigasi Android yang sebagian mengaburkan elemen tersebut pada saat itu.

Untuk menguranginya, gunakan inset area aman untuk selalu memosisikan elemen yang terpengaruh di atas menu navigasi gestur bawah native Android, atau untuk memperluas latar belakangnya ke area tersebut.

Inset area aman

Browser Support

• 69
• 79
• 65
• 11

Source

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

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

Ilustrasi Chrome dalam mode dari tepi ke tepi dengan area pandang dan persegi panjang area aman dicat kuning. Karena dagu ditarik, inset bawah area aman mencegah persegi panjang area aman menjangkau ke dalam menu navigasi gestur. Akibatnya, Anda akan melihat tampilan jendela 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 menu navigasi gestur. Nilai yang ditampilkan oleh safe-area-inset-bottom diperbarui secara dinamis saat dagu bergerak keluar, sehingga elemen yang diposisikan di bagian 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 situs dengan elemen yang diposisikan di bagian bawah yang menggunakan inset area aman bawah dengan properti bottom. Saat dagu terlihat, panel berada di atas panel navigasi gestur Android. Saat dagu hilang, elemen juga akan berada di atasnya.

Seperti yang dapat Anda lihat dalam ilustrasi, hasilnya belum sempurna: saat dagu 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 digambar di bawah konten yang ditautkan ke bawah, pendekatan yang biasa digunakan adalah menetapkan padding-bottom ke safe-area-inset-bottom. Dengan begitu, elemen yang ditautkan ke bawah akan otomatis bertambah saat dagu disembunyikan. Meskipun berhasil, pendekatan ini tidak direkomendasikan karena menyebabkan thrashing tata letak saat chin bergerak keluar.

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

Penting: Untuk mencegah regresi performa, Chrome tidak akan menggeser chin saat Anda men-scroll saat mendeteksi pola ini.

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 keluar dari jalan, safe-area-max-inset-bottom mewakili nilai maksimum safe-area-inset-bottom.

Gunakan safe-area-max-inset-bottom ini untuk memperluas elemen yang ditautkan ke bawah di awal, dan gabungkan dengan safe-area-inset-bottom untuk menarik elemen ke bawah sehingga berada di belakang dagu.

Menggunakan 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

Catatan: nilai penggantian 36px untuk safe-area-max-inset-bottom dipilih untuk memenuhi kebutuhan browser yang tidak mendukung safe-area-max-inset-bottom. Nilai ini dipilih karena Safari di iOS dalam Mode Tab Tunggal memiliki offset bawah maksimum 36px dalam mode potret.

Penting: Chrome memiliki pengoptimalan kode–yang disebut jalur cepat–saat mendeteksi pola calc(env(safe-area-inset-bottom, …) +/- …);. Jalur cepat ini memungkinkan konten yang ditautkan ke bagian bawah bergerak bersama dengan dagu dengan performa yang baik saat dagu bergerak keluar.

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 chin bergerak menjauh, tidak ada thrashing tata letak yang terjadi.

Ilustrasi situs dengan elemen yang disematkan 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 menu navigasi gestur Android.

Catatan: Inset area aman maksimum (safe-area-max-inset-bottom dan teman-teman) tersedia mulai Chrome 135.

Mencoba tampilan penuh sebelum Chrome 135

Untuk mencoba tampilan penuh sebelum rilis stabil publiknya, Anda perlu mengaktifkan beberapa flag fitur Chrome melalui chrome://flags:

• EdgeToEdgeBottomChin (opsional, menetapkannya ke "Enabled Debug" akan mewarnai setengah dagu dengan warna merah muda untuk membedakannya dengan UI lainnya dengan lebih jelas)
• 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 layar penuhnya, hubungi kami dengan melaporkan bug Chromium di komponen "UI > Browser > Mobile > EdgeToEdge". Kami sangat menghargai masukan yang Anda berikan.