Schermo da bordo a bordo in Capacitor senza plugin

Display Edge-to-Edge senza plugin in Capacitor Vuoi implementare il display edge-to-edge nel tuo Capacitor senza alcun hack? adjustMarginsForEdgeToEdge Non hai bisogno di alcun hack, plugin o soluzione di lavoro. __CAPGO_KEEP_0__ supporta ufficialmente il display edge-to-edge attraverso l'opzione di configurazione - è solo poco documentata.

Molti sviluppatori si scontrano con gli schemi di layout edge-to-edge nei loro Capacitor app, soprattutto quando si mira a Android 15+. Spesso ricorrono a plugin o hack CSS per ottenere l'aspetto moderno edge-to-edge. Ma c'è una soluzione migliore, nativa.

Cos'è il Display Edge-to-Edge?

Il display edge-to-edge consente al contenuto dell'app di estendersi dietro le barre di sistema (barra di stato e barra di navigazione), creando un'esperienza di interfaccia utente più immersiva e moderna. A partire da Android 15, Google sta promuovendo l'edge-to-edge come lo standard per tutte le app.

La Soluzione Ufficiale: adjustMarginsForEdgeToEdge

Capacitor fornisce la adjustMarginsForEdgeToEdge opzione di configurazione specificamente per questo scopo. Ciò è documentato nella documentazione di configurazione ufficiale Capacitor, ma è facile perdere di vista.

Come Configurarla

Aggiungi questo al tuo capacitor.config.ts o 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;

contexto: frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitrice `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di aggiornamento live di Capacitor. Ruolo: paragrafo di marketing o legale lungo. Visto in: pagina alternatives.astro. Preservare i termini di prodotto/marca e sviluppatore di Capgo esattamente. Chiave di messaggio `alternatives_cta_questions` (Domande di chiamata all'azione per le alternative). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitrice `appflow_cta_questions`). Pagina/area: pagina di confronto/migrazione di Appflow. Ruolo: paragrafo di marketing o legale lungo. Visto in: pagina ionic-appflow.astro. Preservare i termini di prodotto/marca e sviluppatore di Capgo esattamente. Chiave di messaggio `appflow_cta_questions` (Domande di chiamata all'azione per Appflow). | Frammento di testo HTML da una stringa UI Capgo più lunga (chiave genitrice `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: paragrafo di marketing o legale lungo. Visto in: pagina capwesome.astro. Preservare i termini di prodotto/marca e sviluppatore di Capgo esattamente. Chiave di messaggio `capwesome_cta_questions` (Domande di chiamata all'azione per Capawesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: sottotitolo di sezione o didascalia. Visto in: pagina consulting.astro. Preservare i termini di prodotto/marca e sviluppatore di Capgo esattamente. Chiave di messaggio `consulting_faq_subtitle` (Sottotitolo delle domande frequenti per la consulenza). | Pagina/area: pagina di confronto/migrazione di Appflow. Ruolo: etichetta di UI breve o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina solutions/ionic-enterprise-plugins.astro. Chiave di messaggio `appflow_plugins_or` (Appflow Plugins o).

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

o in formato JSON:

Opzioni di Configurazione adjustMarginsForEdgeToEdge L'

1. `"auto"` opzione accetta tre valori:

adjustMarginsForEdgeToEdge: 'auto'

(Consigliato) Controlla automaticamente Android 15+ e il windowOptOutEdgeToEdgeEnforcement Regola le margine in modo intelligente in base al dispositivo e alla configurazione.

Per chi è adatto: La maggior parte degli app di produzione che desiderano un display edge-to-edge sui dispositivi supportati, mantenendo la compatibilità con le versioni Android più vecchie.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Cosa fa: Forza l'aggiustamento delle margine per un display edge-to-edge indipendentemente dalla versione Android o da altre impostazioni.

Per chi è adatto: Gli app che desiderano il comportamento edge-to-edge su tutte le versioni Android supportate.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

Cosa fa: Disabilita completamente l'aggiustamento automatico delle margine.

Per chi è adatto: Gli app che gestiscono manualmente la disposizione edge-to-edge o non desiderano il comportamento edge-to-edge.

Nota: Attualmente "disable" è la impostazione predefinita, ma questo cambierà in "auto" in Capacitor 8.

Perché Questo Importa per Android 15+

A partire da Android 15, Google sta imponendo l'edge-to-edge display come comportamento predefinito. Le app che non gestiscono correttamente gli schemi di layout edge-to-edge potrebbero avere problemi di UI come:

Contenuto nascosto dietro le barre di sistema
Spaziatura e padding scomodi
Aspetto non coerente su dispositivi diversi
Pessima esperienza utente

Utilizzando la configurazione ufficiale, si garantisce che l'app gestisca correttamente questi cambiamenti senza dover utilizzare __CAPGO_KEEP_0__ personalizzati. adjustMarginsForEdgeToEdge config, you ensure your app handles these changes properly without custom code.

Esempio Completo

Ecco un esempio di configurazione completa per un'app moderna Capacitor:

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;

Considerazioni CSS

Quando si utilizza lo schermo da bordo a bordo, potrebbe essere necessario aggiungere alcuni CSS per gestire le aree sicure:

/* 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";
}

Testare la tua Configurazione

Dopo aver configurato adjustMarginsForEdgeToEdge, testa il tuo app su:

Dispositivi Android 15+ - Verifica che il contenuto rispetti correttamente le barre del sistema
Versioni Android più vecchie - Assicurati della compatibilità con le versioni precedenti
Diversi dimensioni dello schermo - Verifica che i layout funzionino su dispositivi diversi
- Temi chiaro e scuro - Testa entrambi i modi di tema

Errori Comuni da Evitare

Non Utilizzare Plugin per Questo

Non hai bisogno di plugin di terze parti come capacitor-edge-to-edge o simili. La configurazione nativa gestisce questo in modo pulito. Se hai bisogno di un controllo fine-granulare sulla barra di navigazione del sistema dopo aver abilitato adjustMarginsForEdgeToEdge, @capgo/@capacitor-barra-di-navigazione e @ capgo/@__CAPGO_KEEP_1__-indicatore-di-home completa la configurazione nativa senza sostituirlo.

Non Mescolare con Implementazioni Manuali

If sei stai utilizzando adjustMarginsForEdgeToEdge, elimina qualsiasi gestione manuale degli insetti della finestra o gli hack CSS che potresti aver aggiunto.

Don’t Dimenticati CSS Area di sicurezza

Il config gestisce gli aggiustamenti di margine, ma hai ancora bisogno di utilizzare gli insetti CSS di area di sicurezza per un padding del contenuto corretto.

Guida di Migrazione

Se sei attualmente utilizzando plugin o hack per edge-to-edge:

Elimina qualsiasi plugin edge-to-edge dai le tue dipendenze
Aggiungi l'opzione di config a capacitor.config.ts
Pulisci e ricostruisci il tuo progetto Android
Testate accuratamente su dispositivi di destinazione

# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..

# Rebuild
npx cap copy android
npx cap open android

Previsione del Futuro

Ricorda che Capacitor 8 farà "auto" il valore predefinito. Per prepararsi:

Testa con "auto" ora per individuare eventuali problemi presto
Aggiorna il tuo CSS per gestire le aree sicure in modo corretto
Verifica le tue impostazioni su dispositivi abilitati per schermi da bordo a bordo

Risorse aggiuntive

Conclusioni

La schermata da bordo a bordo in Capacitor non richiede plugin, hack o complicati workaround. L'opzione di configurazione fornisce una soluzione nativa pulita che è ufficialmente supportata e futura-proof. adjustMarginsForEdgeToEdge Inizia con

per la maggior parte delle app, testa accuratamente su diversi dispositivi e aggiungi CSS di area sicura appropriata. La tua app sarà pronta per Android 15 e oltre con sforzo minimo. "auto" Domande o problemi di esecuzione?

La comunità di __CAPGO_KEEP_0__ e The Capacitor community and Capacitor sono eccellenti risorse per ulteriore aiuto.

Continua da Edge-to-Edge Display in Capacitor Senza Plugin

Se stai utilizzando Edge-to-Edge Display in Capacitor Senza Plugin per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Utilizzando @capgo/capacitor-live-attività per la capacità nativa in Utilizzando @capgo/capacitor-live-attività @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzando @capgo/capacitor-player-video per la capacità nativa in Utilizzando @capgo/capacitor-player-video @capgo/capacitor-player-video per i dettagli di implementazione in @capgo/capacitor-video-player, e Utilizzando @capgo/capacitor-native-navigation per la capacità nativa in Utilizzando @capgo/capacitor-native-navigation.

Edge-to-Edge Display in Capacitor Without Plugins