Tampilan Penuh Layar di Capacitor Tanpa Plugin

Mencoba untuk menerapkan tampilan penuh layar di aplikasi Capacitor Anda? Anda tidak memerlukan trik, plugin, atau kerja sama apa pun. Capacitor memiliki dukungan resmi untuk tampilan penuh layar melalui adjustMarginsForEdgeToEdge opsi konfigurasi - itu hanya tidak terdokumentasikan secara luas.

Banyak pengembang kesulitan dengan tata letak penuh layar di aplikasi Capacitor, terutama ketika menghadapi Android 15+. Mereka sering menggunakan plugin atau CSS yang disesuaikan untuk mencapai tampilan modern penuh layar. Tapi ada cara yang lebih baik, native.

Apa itu Layar Tanpa Batas?

Layar tanpa batas memungkinkan konten aplikasi Anda untuk meluas di belakang bar sistem (status bar dan navigation bar), menciptakan pengalaman UI yang lebih imersif dan modern. Mulai dengan Android 15, Google mendorong edge-to-edge sebagai standar untuk semua aplikasi.

Solusi Resmi: aturMarginUntukLayarTanpaBatas

Capacitor menyediakan opsi konfigurasi khusus untuk tujuan ini. Ini dokumentasi resmi Capacitor konfigurasi adjustMarginsForEdgeToEdge Cara Mengkonfigurasinya official Capacitor config documentationatau

Atau dalam format JSON:

Opsi Konfigurasi capacitor.config.ts __CAPGO_KEEP_0__ capacitor.config.json:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  android: {
    adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
  }
};

export default config;

__CAPGO_KEEP_0__

{
  "appId": "com.example.app",
  "appName": "My App",
  "webDir": "dist",
  "android": {
    "adjustMarginsForEdgeToEdge": "auto"
  }
}

__CAPGO_KEEP_0__

Pilihan ini menerima tiga nilai: adjustMarginsForEdgeToEdge (Dianjurkan)

1. "auto" Apa yang dilakukan:

adjustMarginsForEdgeToEdge: 'auto'

Mengatur secara otomatis untuk Android 15+ dan pengaturan. Menyesuaikan margin cerdas berdasarkan perangkat dan konfigurasi. windowOptOutEdgeToEdgeEnforcement Terbaik untuk:

Aplikasi produksi yang paling banyak ingin edge-to-edge pada perangkat yang didukung sambil menjaga konsistensi dengan versi Android yang lebih tua. Apa yang dilakukan:

2. "force"

adjustMarginsForEdgeToEdge: 'force'

Menggunakan penyesuaian margin untuk edge-to-edge tanpa mempertimbangkan versi Android atau pengaturan lainnya. Terbaik untuk:

Aplikasi yang ingin perilaku edge-to-edge di semua versi Android yang didukung. Apa yang dilakukan:

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

Apa yang dilakukannya: Menghapus penyesuaian margin otomatis sepenuhnya.

Terbaik untuk: Aplikasi yang menghandle tata letak tepi-tepi secara manual atau tidak ingin perilaku tepi-tepi.

Catatan: Saat ini "disable" adalah default, tetapi ini akan berubah menjadi "auto" dalam Capacitor 8.

Mengapa Ini Penting untuk Android 15+

Mulai dari Android 15, Google menerapkan tampilan tepi-tepi sebagai perilaku default. Aplikasi yang tidak menghandle tata letak tepi-tepi dengan benar mungkin mengalami masalah UI seperti:

• Konten disembunyikan di balik bar sistem
• Spasi dan padding yang tidak nyaman
• Tampilan tidak konsisten di perangkat
• Pengalaman pengguna yang buruk

Dengan menggunakan versi resmi adjustMarginsForEdgeToEdge konfigurasi, Anda memastikan aplikasi Anda mengatasi perubahan-perubahan ini dengan benar tanpa code yang disesuaikan.

Contoh Lengkap

Berikut adalah contoh konfigurasi lengkap untuk aplikasi modern Capacitor:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My Awesome App',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  android: {
    // Enable edge-to-edge automatically on supported devices
    adjustMarginsForEdgeToEdge: 'auto',

    // Other Android config options...
    backgroundColor: '#ffffff'
  }
};

export default config;

Pertimbangan CSS

Saat menggunakan layar tanpa batas, Anda mungkin perlu menambahkan beberapa CSS untuk mengatasi area yang aman:

/* Add padding for system bars */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Or use viewport-fit */
meta[name="viewport"] {
  content: "width=device-width, initial-scale=1, viewport-fit=cover";
}

Menguji Konfigurasi Anda

Setelah mengonfigurasi adjustMarginsForEdgeToEdge, uji aplikasi Anda di:

1. Perangkat Android 15+ - Pastikan konten dengan benar menghormati bar sistem
2. Versi Android yang lebih lama - Pastikan konsistensi ke belakang
3. Ukuran layar yang berbeda - Verifikasi tata letak bekerja di perangkat yang berbeda
4. Suhu cahaya dan gelap - Uji mode tema yang berbeda

Kesalahan Umum untuk Dihindari

Jangan Gunakan Plugin untuk Ini

Anda tidak memerlukan plugin pihak ketiga seperti capacitor-edge-to-edge atau yang serupa. Konfigurasi native mengelola hal ini dengan rapi.

Jangan Campur dengan Implementasi Manual

Jika Anda menggunakan adjustMarginsForEdgeToEdgeJangan Lupa CSS Area Aman

Petunjuk Pindahan

Jika Anda saat ini menggunakan plugin atau trik untuk edge-to-edge:

Hapus plugin edge-to-edge dari ketergantungan Anda

Tambahkan opsi konfigurasi

1. ke Membersihkan dan membangun kembali
2. projek Android Anda __CAPGO_KEEP_0__ capacitor.config.ts
3. __CAPGO_KEEP_1__ __CAPGO_KEEP_2__
4. Tes secara menyeluruh di perangkat target

# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..

# Rebuild
npx cap copy android
npx cap open android

Mengantisipasi Masa Depan

Ingatlah bahwa Capacitor 8 akan membuat "auto" nilai default. Untuk mempersiapkan:

1. Tes dengan "auto" saat ini untuk menangkap masalah-masalah sejak awal
2. Perbarui CSS Anda untuk menghandle area-area yang aman dengan benar
3. Tinjau tata letak Anda di perangkat yang mendukung layar penuh

Sumber Tambahan

• Dokumentasi Konfigurasi Capacitor Resmi
• Pedoman Android Edge-to-Edge
• CSS Area Aman

Kesimpulan

Tampilan Edge-to-edge di Capacitor tidak memerlukan plugin, trik, atau kerja sekitar yang rumit. Opsi konfigurasi menyediakan solusi yang bersih dan asli yang mendapat dukungan resmi dan tahan lama. adjustMarginsForEdgeToEdge Mulai dengan

untuk aplikasi kebanyakan, tes secara menyeluruh di berbagai perangkat, dan tambahkan CSS area aman yang sesuai. Aplikasi Anda akan siap untuk Android 15 dan ke depannya dengan upaya minimal. "auto" Pertanyaan atau mengalami masalah?

Komunitas __CAPGO_KEEP_0__ dan The Capacitor community and Dokumentasi Resmi adalah sumber daya tambahan yang bagus untuk bantuan tambahan.

Teruskan dari Display Edge-to-Edge di Capacitor Tanpa Plugin

Jika Anda menggunakan Display Edge-to-Edge di Capacitor Tanpa Plugin untuk merencanakan perilaku media dan antarmuka asli, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan asli dalam Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi dalam @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.