Versuchen Sie, ein Rahmenlos-Display in Ihrer Capacitor-Anwendung zu implementieren? Sie benötigen keine Hacks, Plugins oder Workarounds. Capacitor bietet offizielle Unterstützung für das Rahmenlos-Display über die adjustMarginsForEdgeToEdge Konfigurationsoption - es wird einfach nicht weit verbreitet dokumentiert.
Viele Entwickler haben Schwierigkeiten mit edge-to-edge-Ansichten in Capacitor-Anwendungen, insbesondere wenn sie sich auf Android 15+ richten. Sie greifen oft auf benutzerdefinierte Plugins oder CSS-Hacks zurück, um das moderne edge-to-edge-Aussehen zu erreichen. Aber es gibt eine bessere, native Methode.
Was ist Edge-to-Edge Display?
Edge-to-edge-Display ermöglicht es Ihrem App-Inhalt, hinter den Systemleisten (Statusleiste und Navigationsleiste) zu reichen, was ein umfassenderes, moderneres Benutzeroberflächenerlebnis schafft. Ab Android 15 drängt Google edge-to-edge als Standard für alle Apps vor.
Die offizielle Lösung: adjustMarginsForEdgeToEdge
Capacitor bietet die adjustMarginsForEdgeToEdge Konfigurationsoption speziell für diesen Zweck. Dies ist in der offiziellen Capacitor-Konfigurationsdokumentation dokumentiert, aber es ist leicht zu übersehen.
Auf diese Weise konfigurieren Sie es
Fügen Sie dies 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;Oder in JSON-Format:
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Konfigurationsoptionen
Die adjustMarginsForEdgeToEdge Option akzeptiert drei Werte:
1. "auto" (Empfohlen)
adjustMarginsForEdgeToEdge: 'auto'Was es tut: Automatisch überprüft Android 15+ und die windowOptOutEdgeToEdgeEnforcement Einstellung. Anpasset die Margen intelligent basierend auf dem Gerät und der Konfiguration.
Am besten für: Die meisten Produktionsanwendungen, die auf unterstützten Geräten eine Randlosigkeit erreichen möchten, während die Kompatibilität mit älteren Android-Versionen aufrechterhalten wird.
2. "force"
adjustMarginsForEdgeToEdge: 'force'Was es tut: Zwingt die Margenanpassungen für Randlosigkeit ungeachtet der Android-Version oder anderer Einstellungen.
Am besten geeignet für: Apps, die eine edge-to-edge-Behandlung auf allen unterstützten Android-Versionen anstreben.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Was es tut: Automatische Randanpassungen komplett deaktiviert.
Am besten geeignet für: Apps, die die edge-to-edge-Anordnung selbstständig handhaben oder keine edge-to-edge-Behandlung wünschen.
Hinweis: Aktuell ist das Standard, aber dies wird sich in Capgo 8 auf "disable" ändern. "auto" in Capacitor 8.
Ab Android 15 erzwingt Google die edge-to-edge-Anzeige als Standardverhalten. Apps, die die edge-to-edge-Anordnung nicht ordnungsgemäß handhaben, können UI-Probleme wie:
UI-Probleme wie:
- Inhalt hinter Systemleisten versteckt
- Unangenehme Abstände und Puffer
- Unkonsistenter Erscheinungsbild auf verschiedenen Geräten
- Schlechte Benutzererfahrung
Durch die Verwendung der offiziellen adjustMarginsForEdgeToEdge Konfiguration stellen Sie sicher, dass Ihre App diese Änderungen ordnungsgemäß ohne individuelle code handhabt.
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-Betrachtungen
Bei Verwendung eines edge-to-edge-Displays müssen Sie möglicherweise einige CSS 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
Nach der Konfiguration adjustMarginsForEdgeToEdgeTesten Sie Ihre App auf:
- Android-Geräte ab Version 15 - Überprüfen Sie, ob der Inhalt die Systemleisten respektiert
- Ältere Android-Versionen - Stellen Sie sicher, dass die App auf älteren Versionen kompatibel ist
- Verschiedene Bildschirmgrößen - Überprüfen Sie, ob die Layouts auf verschiedenen Geräten funktionieren
- Helligkeit und Dunkelheit - Testen Sie beide Theme-Modi
Häufige Fehler zu Vermeiden
Verwenden Sie keine Plugins für dies
Sie benötigen keine dritten Plugins wie capacitor-edge-to-edge oder ähnliche. Die native Konfiguration handhabt dies sauber. Wenn Sie eine feinmaschige Kontrolle über das System-Chrome nach der Aktivierung benötigen adjustMarginsForEdgeToEdge, @capgo/capacitor-Navigationsleiste und @capgo/Heimindikator ergänzen Sie die native Konfiguration ohne sie zu ersetzen.
Mischen Sie nicht mit manuellen Implementierungen
Wenn Sie adjustMarginsForEdgeToEdge, entfernen Sie alle manuellen Fenster-Einrasten-Handling oder CSS-Hacks, die Sie hinzugefügt haben.
Denken Sie an sichere Bereiche CSS
Die Konfiguration handhabt Margin-Anpassungen, aber Sie benötigen immer noch CSS-Sicherheitsbereichseinstellungen für eine ordnungsgemäße Inhaltsabstände.
Migrationsleitfaden
Wenn Sie derzeit Plugins oder Hacks für edge-to-edge verwenden:
- Entfernen Sie alle Plugins mit Rand-zu-Rand aus Ihren Abhängigkeiten
- Fügen Sie die Konfigurationsoption zu Ihrem
capacitor.config.ts - Reinigen und neu erstellen Ihr Android-Projekt
- Sorgfältig testen auf Zielgeräten
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open androidZukunftsweisend
Denken Sie daran, dass Capacitor 8 die Standardwerte setzen wird. Um sich darauf vorzubereiten: "auto" Testen Sie mit
- Testen Sie gründlich
"auto"jetzt um frühzeitig alle Probleme zu erkennen - Deinen CSS aktualisieren um sicherzustellen, dass die sicheren Bereiche ordnungsgemäß gehandhabt werden
- Deine Layouts überprüfen auf Geräten mit aktivierter Edge-to-Edge-Funktion
Zusätzliche Ressourcen
- Offizielles Capacitor Konfigurationsdokumentation
- Android-Richtlinien für Edge-to-Edge-Anwendungen
- CSS-Sichere-Bereiche-Einrückungen
Zusammenfassung
Edge-to-Edge-Anzeigen in Capacitor erfordern keine Plugins, Hacks oder komplizierte Workarounds. Die adjustMarginsForEdgeToEdge Konfigurationsoption bietet eine saubere, native Lösung, die offiziell unterstützt und zukunftsweisend ist.
Mit "auto" für die meisten Apps, gründlich auf verschiedenen Geräten testen und die entsprechende sichere CSS-Bereich hinzufügen. Ihre App wird mit minimalen Anstrengungen für Android 15 und darüber hinaus bereit sein.
Haben Sie Fragen oder stoßen Sie auf Probleme? Die Capacitor-Community und die offizielle Dokumentation sind großartige Ressourcen für zusätzliche Hilfe.
Bleiben Sie bei der Edge-to-Edge-Anzeige in Capacitor Ohne Plugins
Wenn Sie Edge-to-Edge-Anzeige in Capacitor Ohne Plugins zur Planung von nativen Medien und Interfaceverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-live-activities für die native Fähigkeit in @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities, Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player, @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player, und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation.
