Schermo da bordo a bordo in Capacitor senza plugin

Stai cercando di implementare lo schermo a contatto totale nella tua Capacitor app? Non hai bisogno di nessun hack, plugin o soluzione alternativa. Capacitor supporta lo schermo a contatto totale ufficialmente attraverso l' adjustMarginsForEdgeToEdge opzione di configurazione - è solo poco documentata.

Molti sviluppatori si scontrano con gli schemi di layout a contatto totale nelle app Capacitor, soprattutto quando si mira a Android 15+. Spesso ricorrono a plugin o hack CSS per ottenere l'aspetto moderno dello schermo a contatto totale. Ma esiste una soluzione migliore, nativa.

Cosa è lo Schermo a Contatto Totale?

Lo schermo a contatto totale consente al contenuto dell'app di estendersi dietro le barre del 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 lo schermo a contatto totale come standard per tutte le app.

La Soluzione Ufficiale: adjustMarginsForEdgeToEdge

Capacitor fornisce l' adjustMarginsForEdgeToEdge opzione di configurazione specificamente per questo scopo. Ciò è documentato nella documentazione ufficiale di configurazione di Capacitorma è facile perdere di vista.

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;

O in formato JSON:

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

Opzioni di Configurazione

La adjustMarginsForEdgeToEdge l'opzione accetta tre valori:

1. "auto" (Consigliato)

adjustMarginsForEdgeToEdge: 'auto'

Cosa fa: Controlla automaticamente Android 15+ e la windowOptOutEdgeToEdgeEnforcement imposta. Adatta le margine intelligentemente in base al dispositivo e alla configurazione.

Miglior per: La maggior parte degli app di produzione che desiderano l'edge-to-edge su dispositivi supportati mentre mantengono la compatibilità con le versioni Android più vecchie.

2. "force"

adjustMarginsForEdgeToEdge: 'force'

Cosa fa: Forza gli aggiustamenti di margine per l'edge-to-edge indipendentemente dalla versione Android o da altri impostazioni.

Miglior per: Gli app che desiderano il comportamento edge-to-edge su tutte le versioni Android supportate.

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

Cosa fa: Disabilita completamente gli aggiustamenti di margine automatici.

Miglior per: 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 sperimentare problemi di interfaccia utente 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 adjustMarginsForEdgeToEdge config, assicuri che la tua app gestisca correttamente questi cambiamenti senza codice personalizzato 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 una schermata da bordo a bordo, potrebbe essere necessario aggiungere alcune righe 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";
}

Testa la tua configurazione

Dopo aver configurato adjustMarginsForEdgeToEdgetesta 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à con le versioni precedenti
3. Diversi dimensioni dello schermo - Verifica che i layout funzionino su diversi dispositivi
4. Tempi chiaro e scuro - Testate entrambi i modi di tema

Mistake comuni da evitare

Non utilizzare plugin per questo

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

Non mescolare con implementazioni manuali

Se state utilizzando adjustMarginsForEdgeToEdge, rimuovete qualsiasi gestione manuale degli insetti della finestra o hack CSS che avete aggiunto.

Dimentica l'area di sicurezza CSS

La configurazione gestisce gli aggiustamenti di margine, ma è ancora necessario utilizzare gli insetti di area di sicurezza CSS per un padding del contenuto corretto.

Guida di Migrazione

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

1. Elimina qualsiasi plugin per edge-to-edge da le tue dipendenze
2. Aggiungi l'opzione di configurazione a capacitor.config.ts
3. Pulisci e ricostruisci il tuo progetto Android
4. Testa attentamente su dispositivi target

# 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 presto
2. Aggiorna il CSS per gestire le aree sicure in modo corretto
3. Revisiona le tue impostazioni su dispositivi abilitati per aree di schermo intere

Risorse aggiuntive

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

Conclusioni

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

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

La comunità di __CAPGO_KEEP_0__ e la The Capacitor community and sono eccellenti risorse per ulteriore aiuto. Continua senza plugin dall'Edge-to-Edge Display in __CAPGO_KEEP_0__

Senza plugin dall'Edge-to-Edge Display in Capacitor

If sei stai utilizzando Edge-to-Edge Display in Capacitor Without Plugins per pianificare il comportamento di media e 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 il dettaglio di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione nativa.