Versuchen Sie, einen Capacitor-App mit Randlos-Display zu implementieren? Sie benötigen keine Hacks, Plugins oder Workarounds. Capacitor unterstützt offiziell Randlos-Display über die adjustMarginsForEdgeToEdge Konfigurationsoption - sie ist jedoch nicht weit verbreitet dokumentiert.
Viele Entwickler haben Schwierigkeiten mit Randlos-Anordnungen in Capacitor-Apps, insbesondere bei der Zielgruppe Android 15+. Sie greifen oft auf benutzerdefinierte Plugins oder CSS-Hacks zurück, um den modernen Randlos-Anblick zu erreichen. Aber es gibt eine bessere, native Lösung.
Was ist Randlos-Display?
Randlos-Display ermöglicht es Ihrem App-Inhalt, hinter den Systemleisten (Statusleiste und Navigationsleiste) zu reichen, was eine umfassendere, moderne Benutzeroberfläche bietet. Ab Android 15 drängt Google Randlos-Display als Standard für alle Apps vor.
Die offizielle Lösung: adjustMarginsForEdgeToEdge
Capacitor bietet die adjustMarginsForEdgeToEdge Konfigurationsoption speziell für diesen Zweck an. Dies ist in der offiziellen Capacitor-Konfigurationsdokumentationaber es ist leicht zu übersehen.
Wie Sie es einrichten
Hinzufügen Sie dies zu Ihrem capacitor.config.ts oder 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;Alternativen oder
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Oder in JSON-Format:
Konfigurationsmöglichkeiten adjustMarginsForEdgeToEdge Die
1. "auto" Option akzeptiert drei Werte:
adjustMarginsForEdgeToEdge: 'auto'(Empfohlen) Was es tut: windowOptOutEdgeToEdgeEnforcement Automatisch überprüft es Android 15+ und die
Am besten geeignet: Die meisten Produktionsanwendungen, die auf unterstützten Geräten eine Rand-zu-Rand-Anzeige wollen, während die Kompatibilität mit älteren Android-Versionen aufrechterhalten bleibt.
2. "force"
adjustMarginsForEdgeToEdge: 'force'Was es tut: Unabhängig von der Android-Version oder anderen Einstellungen zwingt es Anpassungen für Rand-zu-Rand.
Am besten geeignet: Apps, die eine Rand-zu-Rand-Anzeige auf allen unterstützten Android-Versionen wollen.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Was es tut: Deaktiviert die automatischen Randanpassungen vollständig.
Am besten geeignet: Apps, die die Rand-zu-Rand-Anordnung manuell handhaben oder keine Rand-zu-Rand-Anzeige wollen.
Hinweis: Derzeit "disable" ist die Standard-Einstellung, aber dies wird sich ändern auf "auto" in Capacitor 8.
Weshalb dies für Android 15+ wichtig ist
Ab Android 15 erzwingt Google die Standard-Einstellung für Edge-to-Edge-Anzeigen. Apps, die diese Anzeigen nicht richtig handhaben, können UI-Probleme wie folgendes erleben:
- Inhalt versteckt hinter Systemleisten
- Unangenehmes Abstand und Paddings
- Unkonsistente Erscheinung auf verschiedenen Geräten
- Schlechte Benutzererfahrung
Durch die Verwendung der offiziellen adjustMarginsForEdgeToEdge Konfiguration stellen Sie sicher, dass Ihre App diese Änderungen richtig handhabt, ohne eine benutzerdefinierte code.
Vollständiges Beispiel
Hier ist ein vollständiges Beispielkonfiguration für eine moderne Capacitor-App:
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;CSS-Bedachtnisse
Wenn Sie eine edge-to-edge-Anzeige verwenden, müssen Sie möglicherweise einige CSS-Regeln hinzufügen, um sichere Bereiche zu handhaben:
/* 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";
}Testen Sie Ihre Konfiguration
Nachdem Sie Ihre Konfiguration konfiguriert haben adjustMarginsForEdgeToEdge, testen Sie Ihre App auf:
- Geräte mit Android 15+ - Überprüfen Sie, ob der Inhalt die Systemleisten korrekt respektiert
- Ältere Android-Versionen - Stellen Sie sicher, dass die App auch auf älteren Versionen funktioniert
- Verschiedene Bildschirmgrößen - Überprüfen Sie, ob die Layouts auf verschiedenen Geräten funktionieren
- Helligkeit und Dunkelheit - Beide Theme-Modi testen
Vermeide Gemeinsame Fehler
Verwende keine Plugins für dies
Du benötigst keine dritten Partei-Plugins wie capacitor-edge-to-edge oder ähnliche. Die native Konfiguration handhabt dies sauber. Wenn du eine feinmaschige Kontrolle über das System-Chrome benötigst, nachdem du adjustMarginsForEdgeToEdge, @capgo/capacitor-Navigationsleiste und @capgo/Startseite-Indikator ergänzt die native Konfiguration ohne sie zu ersetzen.
Vermeide Mischungen mit manuellen Implementierungen
Wenn du adjustMarginsForEdgeToEdgeverwendest, entferne alle manuellen Fenster-Einrastungen-Handling oder CSS-Hacks, die du hinzugefügt hast.
Vergessen Sie nicht die Safe-Area-CSS
Die Konfiguration handhabt die Anpassungen der Margen, aber Sie müssen immer noch die Safe-Area-Einrückungen für eine korrekte Inhaltsabstände im CSS verwenden.
Anleitung zur Migration
Wenn Sie derzeit Plugins oder Hacks für edge-to-edge verwenden:
- Entfernen Sie alle edge-to-edge-Plugins aus Ihren Abhängigkeiten
- Fügen Sie die Konfigurationsoption zu Ihrem
capacitor.config.ts - Stellen Sie Ihr Android-Projekt sauber und neu zusammen Testen Sie gründlich
- auf Zielgeräten Entfernen Sie alle edge-to-edge-Plugins
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidZukunfts-Sicherheit
Denken Sie daran, dass Capacitor 8 die Standardwerte setzen wird. Um sich darauf vorzubereiten: "auto" Testen Sie mit
- jetzt
"auto"um frühzeitig Probleme aufzudecken Aktualisieren Sie Ihre CSS - um sichere Bereiche ordnungsgemäß zu behandeln Überprüfen Sie Ihre Layouts
- auf Geräten mit aktivierter Randlos-Anzeige Zusätzliche Ressourcen
Hoffizielle __CAPGO_KEEP_0__-Konfigurationsdokumentation
Zusammenfassung
Rahmenlos-Display in Capacitor erfordert keine Plugins, Hacks oder komplizierte Workarounds. Die adjustMarginsForEdgeToEdge Konfigurationsoption bietet eine saubere, native Lösung, die offiziell unterstützt und zukunftsweisend ist.
Beginnen Sie mit "auto" Für die meisten Apps, testen Sie gründlich auf verschiedenen Geräten und fügen Sie die entsprechenden sicheren Bereiche CSS hinzu. Ihre App ist für Android 15 und darüber hinaus mit minimalen Anstrengungen bereit.
Fragen oder stoßen Sie auf Probleme? Die Capacitor-Community und offizielle Dokumentation sind großartige Ressourcen für zusätzliche Hilfe.
Fortsetzen Sie mit dem Rahmenlosen Display in Capacitor ohne Plugins
If Sie __CAPGO_KEEP_0__ verwenden Edge-to-Edge Display ohne Plugins in Capacitor um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-live-aktivitäten Verwenden Sie @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten Verwenden Sie @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten Verwenden Sie @capgo/capacitor-video-player Verwenden Sie @capgo/capacitor-video-player für die native Fähigkeit in Verwenden Sie @capgo/capacitor-video-player @capgo/capacitor-video-player Verwenden Sie @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player und Verwenden Sie @capgo/capacitor-native-navigations Für die native Fähigkeit in Verwendung von @capgo/capacitor-native-Navigation.
