Versuchen Sie, ein Rahmenlos-Display in Ihrer Capacitor-Anwendung umzusetzen? Sie benötigen keine Hacks, Plugins oder Workarounds. Capacitor unterstützt offiziell Rahmenlose-Display über die adjustMarginsForEdgeToEdge Konfigurationsoption - es ist einfach nicht weit verbreitet dokumentiert.
Viele Entwickler haben Schwierigkeiten mit Rahmenlos-Layouts in Capacitor-Anwendungen, insbesondere bei der Zielgruppe Android 15+. Sie greifen oft auf benutzerdefinierte Plugins oder CSS-Hacks zurück, um das moderne Rahmenlose-Aussehen zu erreichen. Aber es gibt eine bessere, native Lösung.
Was ist Rahmenloses-Display?
Rahmenloses-Display ermöglicht es Ihrem App-Inhalt, hinter den Systemleisten (Statusleiste und Navigationsleiste) zu reichen, was eine immersivere, moderne Benutzeroberfläche schafft. Ab Android 15 drängt Google Rahmenloses-Display als Standard für alle Apps.
Die offizielle Lösung: adjustMarginsForEdgeToEdge
Capacitor bietet die adjustMarginsForEdgeToEdge Konfigurationsoption speziell für diesen Zweck an. Dies ist in der offiziellen Capacitor-Konfigurationsdokumentation dokumentiertAber es ist leicht zu übersehen.
Wie es konfiguriert wird
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;Oder in JSON-Format:
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}Konfigurationsmöglichkeiten
Die adjustMarginsForEdgeToEdge Option akzeptiert drei Werte:
1. "auto" (Empfohlen)
adjustMarginsForEdgeToEdge: 'auto'Was es tut: Automatisch überprüft Android 15+ und die windowOptOutEdgeToEdgeEnforcement Einstellung. Anpassen Sie die Margen intelligent basierend auf dem Gerät und der Konfiguration.
Best for: Für die meisten Produktionsanwendungen, die auf unterstützten Geräten eine Rand-zu-Rand-Ansicht haben möchten, während die Kompatibilität mit älteren Android-Versionen aufrechterhalten bleibt.
2. "force"
adjustMarginsForEdgeToEdge: 'force'Was es tut: Zwingt Anpassungen der Randabstände für Rand-zu-Rand unabhängig von der Android-Version oder anderen Einstellungen.
Best for: Apps, die eine Rand-zu-Rand-Ansicht auf allen unterstützten Android-Versionen haben möchten.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'Was es tut: Deaktiviert die automatischen Anpassungen der Randabstände vollständig.
Best for: Apps, die die Rand-zu-Rand-Ansicht manuell handhaben oder keine Rand-zu-Rand-Ansicht haben möchten.
Hinweis: Aktuell "disable" ist die Standard, aber dies wird sich ändern zu "auto" in Capacitor 8.
Warum Dies für Android 15+ wichtig ist
Ab Android 15 erzwingt Google den edge-to-edge-Display als Standardverhalten. Apps, die diesen edge-to-edge-Ansatz nicht richtig handhaben, können UI-Probleme wie:
- Inhalt, der hinter den Systemleisten verborgen ist
- Unangenehmes Abstand und Padding
- 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 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-Überlegungen
Wenn Sie einen Rand-zu-Rand-Bildschirm verwenden, 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";
}Ihrer Konfiguration
Nach der Konfiguration, testen Sie Ihre App auf: adjustMarginsForEdgeToEdgeAndroid-Geräte ab Version 15
- - Überprüfen Sie, ob der Inhalt die Systemleisten korrekt respektiert Ältere Android-Versionen
- - Stellen Sie sicher, dass die Kompatibilität mit älteren Versionen gewährleistet ist Verschiedene Bildschirmgrößen
- - Überprüfen Sie, ob die Layouts auf verschiedenen Geräten funktionieren Helligkeit und Dunkelheitsthemen
- Ihrer Konfiguration - Beide Theme-Modi testen
Gemeinsame Fehler zu vermeiden
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 fein abgestimmte Kontrolle über das System-Chrome benötigst, nachdem du adjustMarginsForEdgeToEdge, @capgo/capacitor-Navigationsleiste und @capgo/Heim-Indikator erweitern die native Konfiguration ohne sie zu ersetzen.
Verwirre nicht mit manuellen Implementierungen
Wenn du adjustMarginsForEdgeToEdge, entferne alle manuellen Fenster-Einrastungen-Handling oder CSS-Hacks, die du hinzugefügt hast.
Denken Sie an Safe Area CSS
Die Konfiguration handhabt die Anpassung der Margen, aber Sie müssen immer noch CSS-Safe-Area-Einrückungen verwenden, um eine korrekte Inhaltsabstände zu gewährleisten.
Migrationsleitfaden
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 - Reinigen und neu erstellen Ihren Android-Projekt
- Testen Sie gründlich auf Zielgeräten
# 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 den Standardwert setzen wird "auto" Die Vorbereitung:
- Testen Sie mit
"auto"jetzt um frühzeitig Probleme zu erkennen - Aktualisieren Sie Ihre CSS um sicherzustellen, dass sichere Bereiche korrekt behandelt werden
- Überprüfen Sie Ihre Layouts auf Geräten mit aktivierter Randlos-Option
Zusätzliche Ressourcen
- Offizielles Capacitor-Konfigurationsdokumentation
- Android-Rahmenleisten von Edge-to-Edge
- CSS-Sichere Bereiche von Edge-to-Edge
Zusammenfassung
Ein Edge-to-Edge-Bildschirm in Capacitor erfordert keine Plugins, Hacks oder komplizierte Workarounds. Die adjustMarginsForEdgeToEdge Konfigurationsoption bietet eine saubere, native Lösung, die offiziell unterstützt und zukunftssicher ist.
Beginnen Sie mit "auto" Für die meisten Apps, testen Sie gründlich auf verschiedenen Geräten und fügen Sie den entsprechenden sicheren Bereich CSS hinzu. Ihre App ist mit minimalen Anstrengungen für Android 15 und darüber hinaus bereit.
Fragen oder stoßen Sie auf Probleme? Die Capacitor-Community und die offizielle Dokumentation sind großartige Ressourcen für zusätzliche Hilfe.
Fortsetzen Sie von Edge-to-Edge-Bildschirm in Capacitor ohne Plugins
If Sie __CAPGO_KEEP_0__ verwenden Edge-to-Edge Display in Capacitor ohne Plugins um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit 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 für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten, Verwenden Sie @capgo/capacitor-video-player für die native Fähigkeit in Verwenden Sie @capgo/capacitor-video-player, @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 Using @capgo/capacitor-native-navigation.
