Randloses Display in Capacitor ohne Plugins

Versuchen Sie, ein Rahmenlos-Display in Ihrer Capacitor-Anwendung umzusetzen? Sie benötigen keine Hacks, Plugins oder Workarounds. Capacitor bietet offizielle Unterstützung für ein Rahmenlos-Display über die adjustMarginsForEdgeToEdge Konfigurationsoption - es ist einfach nicht weit verbreitet dokumentiert.

Viele Entwickler haben Schwierigkeiten mit edge-to-edge-Ansichten in Capacitor-Apps, insbesondere wenn sie sich auf Android 15+ richten. Sie greifen oft auf benutzerdefinierte Plugins oder CSS-Hacks zurück, um den modernen edge-to-edge-Ansicht zu erreichen. Aber es gibt eine bessere, native Lösung.

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.

Wie es zu konfigurieren ist

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 nimmt drei Werte an:

1. `"auto"` (Empfohlen)

adjustMarginsForEdgeToEdge: 'auto'

Was es tut: Automatisch überprüft Android 15+ und die windowOptOutEdgeToEdgeEnforcement Einstellung. Anpasset die Ränder intelligent basierend auf dem Gerät und der Konfiguration.

Am besten geeignet 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 gewährleistet ist.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Was es tut: Zwingt die Anpassung der Ränder für Randlosigkeit, unabhängig von der Android-Version oder anderen Einstellungen.

Best for: 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.

Best for: Apps, die die edge-to-edge-Anordnung selbstständig handhaben oder keine edge-to-edge-Behandlung wünschen.

Hinweis: Aktuell ist das der 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 folgende erleben:

Apps, die nicht richtig auf edge-to-edge-Anordnungen reagieren, können UI-Probleme wie folgende erleben:

Inhalt hinter Systemleisten versteckt
Unangenehme Abstände und Puffer
Unkonsistenter Erscheinungsbild auf verschiedenen Geräten
Schlechte Benutzererfahrung

Durch die Verwendung der offiziellen adjustMarginsForEdgeToEdge config 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 adjustMarginsForEdgeToEdge, test your app on:

Android-Geräte ab Version 15 - Überprüfen Sie, ob der Inhalt die Systemleisten respektiert
Ältere Android-Versionen - Stellen Sie sicher, dass die Kompatibilität aufrechterhalten wird
Verschiedene Bildschirmgrößen - Überprüfen Sie, ob die Layouts auf verschiedenen Geräten funktionieren
Helligkeit und Dunkelheit - Testen Sie beide Themenmodi

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.

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 nicht an Safe Area CSS vergessen

Die Konfiguration handhabt Randanpassungen, aber Sie müssen immer noch CSS-Safe-Area-Einrasten verwenden, um einen korrekten Inhaltspuffer zu erhalten.

Migrationshinweis

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 Ihrer 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 android

Zukunftsweisendes

Denken Sie daran, dass Capacitor 8 die Standardwerte setzen wird. Um sich darauf vorzubereiten: "auto" Sorgfältig testen

jetzt "auto" um potenzielle Probleme frühzeitig zu erkennen Aktualisieren Sie Ihre CSS-Datei
um sicherzustellen, dass sichere Bereiche korrekt behandelt werden Um sicherzustellen, dass sichere Bereiche korrekt behandelt werden
Überprüfen Sie Ihre Layouts auf Geräten mit aktivierter Randlos-Option

Zusätzliche Ressourcen

Zusammenfassung

Ein Randlos-Display in Capacitor erfordert keine Plugins, Hacks oder komplizierte Workarounds. Die Konfigurationsoption bietet eine saubere, native Lösung, die offiziell unterstützt und zukunftssicher ist. adjustMarginsForEdgeToEdge Beginnen Sie mit

für die meisten Apps, testen Sie gründlich auf verschiedenen Geräten und fügen Sie geeignete CSS-Sichere Bereiche hinzu. Ihre App ist mit minimalen Anstrengungen auf Android 15 und darüber hinaus bereit. "auto" Haben Sie Fragen oder stoßen Sie auf Probleme?

Edge-to-edge display in __CAPGO_KEEP_0__ doesn’t require plugins, hacks, or complicated workarounds. The configuration option provides a clean, native solution that’s officially supported and future-proof. Die Capacitor Community und offizielle Dokumentation sind großartige Ressourcen für zusätzliche Hilfe.

Rahmenlos-Display in Capacitor ohne Plugins