Rahmenlos-Display ohne Plugins in Capacitor

Versuchen Sie, eine randlose Anzeige in Ihrer Capacitor-Anwendung umzusetzen? Sie benötigen keine Hacks, Plugins oder Workarounds. Capacitor bietet offizielle Unterstützung für das edge-to-edge Display über das adjustMarginsForEdgeToEdge Konfigurationsoption - es wird einfach nicht breit 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 das moderne edge-to-edge-Aussehen zu erreichen. Aber es gibt eine bessere, nativere Möglichkeit.

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 eine umfassendere, modernere Benutzeroberfläche 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 Konfigurationsmöglichkeit speziell für diesen Zweck an. Dies ist in der offiziellen Capacitor-Konfigurationsdokumentationbeschrieben, aber leicht zu übersehen.

Wie Sie es konfigurieren

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;

Konfigurationsdatei oder in JSON-Format:

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

Einstellungsoptionen

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 Ränder intelligent basierend auf dem Gerät und der Konfiguration.

Best for: Die meisten Produktionsanwendungen, die eine Rand-zu-Rand-Anzeige auf unterstützten Geräten mit der Verwendung älterer Android-Versionen erhalten möchten.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Was es tut: Zwingt Anpassungen der Ränder für Rand-zu-Rand, unabhängig von der Android-Version oder anderen Einstellungen.

Best for: Apps, die eine Rand-zu-Rand-Behavior auf allen unterstützten Android-Versionen wollen.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

What es tut: Deaktiviert automatische Abstandsanpassungen vollständig.

Best for: Apps, die Rand-zu-Rand-Anordnungen manuell handhaben oder kein Rand-zu-Rand-Behavior wollen.

Hinweis: Derzeit "disable" ist die Standard, wird aber zu "auto" in Capacitor 8.

Warum das für Android 15+ wichtig ist

Starting with Android 15, Google is enforcing edge-to-edge display as the default behavior. Apps that don’t properly handle edge-to-edge layouts may experience UI issues like:

Warum dies für Android 15+ wichtig ist:
Unbehagliche Abstände und Pufferung
Unkonsistenter Erscheinungsbild auf verschiedenen Geräten
Schlechte Benutzererfahrung

Durch die Verwendung der offiziellen adjustMarginsForEdgeToEdge Konfiguration, damit Ihre App diese Änderungen ordnungsgemäß verarbeitet, 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-Betrachtungen

When using edge-to-edge display, you may need to add some CSS to handle safe areas:

/* 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, testen Sie Ihre App auf:

Android-Geräte ab Version 15 Überprüfen Sie, ob der Inhalt die Systemleisten korrekt respektiert
Ältere Android-Versionen - Gewährleisten Sie die rückwärtskompatible Funktion
Verschiedene Bildschirmgrößen - Überprüfen Sie die Layouts auf verschiedenen Geräten
Helligkeit und Dunkelheit Testen Sie beide Themenmodi

Häufige Fehler zu Vermeiden

Verwenden Sie keine Plugins für diesen Zweck

Sie benötigen keine dritten Plugins wie capacitor-edge-to-edge oder ähnliche. Die native Konfiguration handhabt dies sauber. Wenn Sie eine fein abgestimmte Kontrolle über die Systemchrome benötigen, nachdem Sie die adjustMarginsForEdgeToEdge, @capgo/capacitor-Navigation-Leiste und @capgo/Home-Indikator ergänzen Sie die native Konfiguration ohne sie zu ersetzen.

Mischen Sie nicht mit manuellen Implementierungen

Wenn Sie bereits adjustMarginsForEdgeToEdgeentfernen Sie alle manuellen Fenster-Einrückungshandhabungen oder CSS-Hacks, die Sie hinzugefügt haben.

Denken Sie an sichere Bereiche für CSS

Die Konfiguration handhabt Randanpassungen, aber Sie müssen immer noch CSS-sichere Bereiche für eine korrekte Inhaltsabstände verwenden.

Migrationsanleitung

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 hinzu zu Ihrem capacitor.config.ts
Reinigen und neu erstellen Ihren 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

Zukunftsweisend

Remember that Capacitor 8 will make "auto" die Standardwerte. Zur Vorbereitung:

jetzt "auto" now um Probleme frühzeitig zu erkennen
Passen Sie Ihren CSS an um sichere Bereiche korrekt zu handhaben
Überprüfen Sie Ihre Layouts auf Geräten mit aktivierter Edge-to-Edge-Funktion

Zusätzliche Ressourcen

Zusammenfassung

Kantenlos-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.

Mit Starten "auto" Für die meisten Apps, testen Sie gründlich auf verschiedenen Geräten und fügen Sie die entsprechende Safe-Area-CSS hinzu. Ihre App ist mit minimalen Anstrengungen für Android 15 und darüber hinaus bereit.

Sind Sie mit Fragen oder Problemen konfrontiert? Die Capacitor-Community und die offizielle Dokumentation sind großartige Ressourcen für zusätzliche Unterstützung.

Fortsetzung von Edge-to-Edge Display in Capacitor Ohne Plugins

Wenn Sie ein Edge-to-Edge Display in Capacitor Ohne Plugins verwenden, um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-live-activities zur nativen Fähigkeit in Mit @capgo/capacitor-live-activities, @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation.

Kantenlos Display in Capacitor ohne Plugins