Schermo da bordo a bordo in Capacitor senza plugin

Provi a implementare la visualizzazione edge-to-edge nella tua applicazione Capacitor? Non hai bisogno di hack, plugin o soluzioni di contorno. Capacitor supporta ufficialmente la visualizzazione da bordo a bordo attraverso il adjustMarginsForEdgeToEdge opzione di configurazione - semplicemente non è molto documentata.

Molti sviluppatori si scontrano con le impostazioni edge-to-edge nei loro app Capacitor, soprattutto quando si mira a Android 15+. Spesso ricorrono a plugin personalizzati o hack CSS per ottenere l'aspetto moderno edge-to-edge. Ma c'è un modo migliore, nativo.

Che cos'è la Display Edge-to-Edge?

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

La Soluzione Ufficiale: adjustMarginsForEdgeToEdge

Capacitor fornisce adjustMarginsForEdgeToEdge l'opzione di configurazione specifica per questo scopo. Questo è documentato nella documentazione ufficiale di configurazione di Capacitor, ma è facile perdere.

Come Configurarlo

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;

Ora in formato JSON:

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

Opzioni di configurazione

La adjustMarginsForEdgeToEdge opzione accetta tre valori:

1. "auto" (Consigliato)

adjustMarginsForEdgeToEdge: 'auto'

What it does: Controlla automaticamente Android 15+ e la windowOptOutEdgeToEdgeEnforcement impostazione. Adatta le margine in modo intelligente in base al dispositivo e alla configurazione.

Consigliato per: La maggior parte degli app di produzione che desiderano un display edge-to-edge su dispositivi supportati, mantenendo la compatibilità con versioni Android più vecchie.

2. "force"

adjustMarginsForEdgeToEdge: 'force'

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

Consigliato per: Applicazioni che desiderano un comportamento edge-to-edge su tutte le versioni di Android supportate.

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

What it does: Disabilita completamente gli aggiustamenti di margine automatici.

Consigliato per: Applicazioni che gestiscono manualmente la disposizione edge-to-edge o non desiderano il comportamento edge-to-edge.

Nota: Attualmente "disable" è il default, ma questo cambierà a "auto" in Capacitor 8.

Perché Questo Importa per Android 15+

Iniziando con Android 15, Google sta imponendo il display edge-to-edge come comportamento predefinito. Le applicazioni che non gestiscono correttamente le disposizioni edge-to-edge potrebbero sperimentare problemi di interfaccia utente come:

• Contenuto nascosto dietro le barre di sistema
• Spaziatura e padding scomodi
• Incoerenza nell'aspetto tra dispositivi
• Pessima esperienza utente

Utilizzando la configurazione ufficiale adjustMarginsForEdgeToEdge configurazione, assicuri che il tuo app gestisca correttamente questi cambiamenti senza code personalizzati.

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, potresti dover 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";
}

Test della Configurazione

Dopo aver configurato adjustMarginsForEdgeToEdge, testa il tuo app su:

1. Dispositivi Android 15+ - Assicurati che il contenuto rispetti correttamente le barre del sistema
2. Versioni Android più vecchie - Assicurati della compatibilità a ritroso
3. Diversi dimensioni dello schermo - Verify layouts work across devices
4. Temi chiaro e scuro - Testa entrambi i modi di tema

Errori Comuni da Evitare

Non Usare 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 sullo scrocco del sistema dopo aver abilitato adjustMarginsForEdgeToEdge, @capgo/capacitor-barra-di-navigazione e @capgo/indicatore-di-home completano la configurazione nativa senza sostituirla.

Non Mescolare con Implementazioni Manuali

Se stai utilizzando adjustMarginsForEdgeToEdge, rimuovi eventuali trattamenti manuali degli insetti della finestra o gli hack CSS che hai aggiunto.

Non Dimenticare CSS Safe Area

Il configura gli spazi di margine, ma è necessario utilizzare gli insetti di area sicura CSS per un padding del contenuto corretto.

Guida di Migrazione

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

1. Rimuovi eventuali plugin edge-to-edge Dal tuo set di dipendenze
2. Aggiungi l'opzione di configurazione a tuo capacitor.config.ts
3. Pulisci e ricostruisci il tuo progetto Android
4. Testa 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

Future-Proofing

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

1. Testa con "auto" ora per catturare eventuali problemi in fase precoce
2. Aggiorna il tuo CSS per gestire le aree sicure in modo corretto
3. Verifica le tue impostazioni di layout su dispositivi abilitati per schermi a bordo

Risorse aggiuntive

• Documentazione ufficiale Capacitor di configurazione
• Linee guida Android Edge-to-Edge
• Insetti di area sicura CSS

Conclusioni

Schermo da bordo a bordo in Capacitor non richiede plugin, trucchi o complicati workaround. Il adjustMarginsForEdgeToEdge opzione di configurazione fornisce una soluzione nativa pulita che è ufficialmente supportata e futura.

Partenza con "auto" per la maggior parte degli app, testare accuratamente su dispositivi diversi e aggiungere CSS di area di sicurezza appropriata. La tua app sarà pronta per Android 15 e oltre con sforzo minimo.

Domande o problemi di esecuzione? La comunità di Capacitor. documentazione ufficiale Sono eccellenti risorse per ulteriore aiuto.

Edge-to-Edge Display in Capacitor Senza Plugin

Se stai utilizzando Utilizzare @Capacitor/__CAPGO_KEEP_1__-live-attività per la capacità nativa in Utilizzare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-attività Utilizzando @capgo/capacitor-attività in tempo reale Per la capacità nativa in Utilizzo di @capgo/capacitor-attività in tempo reale. @capgo/capacitor-attività-in-vivo per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo Utilizzo di @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzo di @capgo/capacitor-lettore-di-video @capgo/capacitor-lettore-di-video per i dettagli di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzo di @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzo di @capgo/capacitor-navigazione-nativa.