Randlos an die Ränder in Capacitor ohne Plugins

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

Viele Entwickler haben Schwierigkeiten mit Randlos-Layouts 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 Randlose-Aussehen zu erreichen. Aber es gibt eine bessere, native Möglichkeit.

Was ist Edge-to-Edge Display?

Edge-to-Edge-Display ermöglicht es Ihrem App-Inhalt, hinter 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 Konfigurationsmöglichkeit speziell zu diesem Zweck. Dies ist in der offiziellen Capacitor Konfigurationsdokumentationdokumentiert, aber leicht zu übersehen.

Wie man es konfiguriert

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"
  }
}

Konfigurationsmöglichkeiten

Die Option akzeptiert drei Werte: adjustMarginsForEdgeToEdge Empfohlen

1. `"auto"` Was es tut:

adjustMarginsForEdgeToEdge: 'auto'

Automatisch überprüft Android 15+ und die Einstellung. Anpassen Sie die Margen intelligent basierend auf dem Gerät und der Konfiguration. windowOptOutEdgeToEdgeEnforcement Am besten geeignet für:

Die meisten Produktionsanwendungen, die auf unterstützten Geräten eine Rand-zu-Rand-Ansicht wollen, während die Kompatibilität mit älteren Android-Versionen aufrechterhalten wird. Was es tut:

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Zwingt Anpassungen der Margen für Rand-zu-Rand unabhängig von der Android-Version oder anderen Einstellungen. Am besten geeignet für:

Anwendungen, die eine Rand-zu-Rand-Ansicht auf allen unterstützten Android-Versionen wollen. __CAPGO_KEEP_0__

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

What es tut: Deaktiviert die automatische Anpassung der Randabstände vollständig.

Am besten geeignet für: Apps, die die Layoutanpassung an die Ränder selbstständig durchführen oder keine Ränder haben möchten.

Hinweis: Derzeit ist das Standardverhalten, aber dies wird sich in Capgo 8 in "disable" auf "auto" in Capacitor 8.

Weshalb das für Android 15+ wichtig ist:

Ab Android 15 erzwingt Google die Standardanzeige von Rändern. Apps, die nicht richtig mit Rändern umgehen, können UI-Probleme wie:

Inhalt, der hinter den Systemleisten verborgen ist
Unangenehme Abstände und Paddings erleben.
Inkonsistente Erscheinung auf verschiedenen Geräten
Poor user experience

Mit der offiziellen Verwendung von adjustMarginsForEdgeToEdge Sie stellen 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 einer edge-to-edge-Anzeige 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 testen Sie Ihre App auf: adjustMarginsForEdgeToEdgeAndroid-Geräte ab Version 15

Android 15+ devices - Stellen Sie sicher, dass der Inhalt die Systemleisten korrekt respektiert
Ältere Android-Versionen - Stellen Sie die rückwärtskompatible Kompatibilität sicher
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 Parteien-Plugins wie capacitor-edge-to-edge oder ähnliche. Die native Konfiguration handhabt dies sauber.

Vermeiden Sie die Kombination mit manuellen Implementierungen

If Sie [__CAPGO_KEEP_0__] verwenden, adjustMarginsForEdgeToEdgeEntfernen Sie alle manuellen Fenster-Einrasten-Handling oder CSS-Hacks, die Sie möglicherweise hinzugefügt haben.

Denken Sie an sichere Bereiche CSS

Die Konfiguration handhabt Margin-Anpassungen, aber Sie müssen immer noch CSS-sichere Bereiche-Einrasten verwenden, um eine korrekte Inhaltsabstände zu gewährleisten.

Migrationshinweise

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 Ihren Android-Projekt sauber und neu zusammen Stellen Sie Ihren Android-Projekt sauber und neu zusammen
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

Zukunftsweisende Sicherung

Beachten Sie, dass Capacitor 8 die Standardwerte setzen wird. Um sich vorzubereiten: "auto" Testen Sie mit

jetzt "auto" um frühzeitig Probleme zu erkennen Aktualisieren Sie Ihre CSS
um sicherzustellen, dass sichere Bereiche ordnungsgemäß behandelt werden Überprüfen Sie Ihre Layouts
auf Geräten mit aktivierter Randlosigkeit __CAPGO_KEEP_0__

Zusätzliche Ressourcen

Fazit

Ein Capacitor-Display, das die gesamte Bildschirmfläche ausnutzt, benötigt keine Plugins, keine Hacks oder komplizierte Workarounds. Die Konfigurationsoption bietet eine saubere, native Lösung, die offiziell unterstützt und zukunftssicher ist. adjustMarginsForEdgeToEdge Beginnen Sie mit der Verwendung von __CAPGO_KEEP_0__ für die meisten Apps, testen Sie gründlich auf verschiedenen Geräten und fügen Sie die entsprechenden sicherheitsrelevanten CSS hinzu. Ihre App ist mit minimalen Anstrengungen auf Android 15 und darüber hinaus bereit.

Fragen oder Probleme? "auto" Die __CAPGO_KEEP_0__-Community und die offizielle Dokumentation

__CAPGO_KEEP_0__-Community und die offizielle Dokumentation Capacitor __CAPGO_KEEP_0__ 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 zum Planen von nativen Medien und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-live-Aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-Aktivitäten, @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.

Randlos-Display in Capacitor ohne Plugins