Schermo da bordo a bordo in Capacitor senza plugin

Stai cercando di implementare lo schermo da bordo a bordo nel tuo Capacitor? Non hai bisogno di trucchi, plugin o workarounds. Capacitor supporta ufficialmente lo schermo da bordo a bordo attraverso adjustMarginsForEdgeToEdge opzione di configurazione - semplicemente non è molto documentata.

Molti sviluppatori hanno difficoltà con gli schemi di layout edge-to-edge nei Capacitor app, 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.

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 l' adjustMarginsForEdgeToEdge opzione di configurazione specifica per questo scopo. Questo è documentato nella documentazione di configurazione ufficiale Capacitor, ma è 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;

In formato JSON:

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

Opzioni di configurazione

L' adjustMarginsForEdgeToEdge l'opzione accetta tre valori:

1. "auto" (Consigliato)

adjustMarginsForEdgeToEdge: 'auto'

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

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

2. "force"

adjustMarginsForEdgeToEdge: 'force'

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

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

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

Cosa fa: Disabilita completamente le regolazioni automatiche dei margini.

Migliore 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à in "auto" in Capacitor 8.

Perché Questo Importa per Android 15+

A partire da 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 dei sistemi
• Spaziatura e padding scomodi
• Aspetto non coerente su dispositivi diversi
• Pessima esperienza utente

Utilizzando l'interfaccia ufficiale adjustMarginsForEdgeToEdge configurando, assicuri che il tuo app gestisca correttamente questi cambiamenti senza dover utilizzare il 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 un display senza bordi, 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";
}

Testare la tua configurazione

Dopo aver configurato adjustMarginsForEdgeToEdge, test your app on:

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. Dimensioni schermo diverse - Verifica che i layout funzionino su dispositivi diversi
4. Temi chiaro e scuro - Testa entrambi i modi di tema

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

Non Mescolare con Implementazioni Manuali

Se stai utilizzando adjustMarginsForEdgeToEdge, elimina qualsiasi gestione di margini manuali per le finestre o hack CSS che potresti aver aggiunto.

Non Dimenticare CSS Safe Area

La configurazione gestisce gli aggiustamenti di margine, ma hai ancora bisogno di utilizzare gli insetti CSS di area sicura per un padding del contenuto adeguato.

Guida di Migrazione

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

1. Elimina i plugin edge-to-edge dai tuoi dipendenze
2. Aggiungi l'opzione di configurazione alle tue capacitor.config.ts
3. Pulisci e ricostruisci il tuo progetto Android
4. Testa accuratamente 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

Preparazione per il futuro

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

1. Testa con "auto" adesso per catturare eventuali problemi presto
2. Aggiorna il tuo CSS per gestire le aree sicure in modo corretto
3. Verifica le tue impostazioni di layout su dispositivi abilitati per l'area di visualizzazione completa

Risorse aggiuntive

• Documentazione ufficiale Capacitor della configurazione
• Linee guida per dispositivi Android con area di visualizzazione completa
• Insiemi di CSS per aree di visualizzazione sicure

Conclusioni

La visualizzazione completa 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 delle app, testa accuratamente su dispositivi diversi e aggiungi CSS di area di visualizzazione sicura appropriata. La tua app sarà pronta per Android 15 e oltre con sforzo minimo. "auto" Hai domande o stai incontrando problemi?

Risorse aggiuntive La comunità e la documentazione ufficiale di Capacitor sono eccellenti risorse per ulteriore aiuto. Documentazione ufficiale sono eccellenti risorse per ulteriore aiuto.