Pantalla completa en Capacitor sin plugins

¿Estás tratando de implementar el display de lado a lado en tu aplicación Capacitor? No necesitas ningún truco, plugin ni workaround. Capacitor tiene un soporte oficial para el display de lado a lado a través de la adjustMarginsForEdgeToEdge opción de configuración - simplemente no está bien documentada.

Muchos desarrolladores se enfrentan a problemas con los diseños de lado a lado en las aplicaciones Capacitor, especialmente cuando se dirigen a Android 15+. A menudo recurren a plugins o trucos CSS para lograr la apariencia moderna de lado a lado. Pero hay una mejor forma nativa.

¿Qué es el Display de Lado a Lado?

El display de lado a lado permite que el contenido de tu aplicación se extienda detrás de las barras del sistema (barra de estado y barra de navegación), creando una experiencia de interfaz de usuario más inmersiva y moderna. A partir de Android 15, Google está impulsando el display de lado a lado como estándar para todas las aplicaciones.

The Official Solution: ajustar márgenes para Edge a Edge

Capacitor proporciona la opción de configuración específicamente para este propósito. Esto se documenta en la documentación de configuración oficial de Capacitor adjustMarginsForEdgeToEdge pero es fácil perderse. official Capacitor config documentationAgregar esto a tu

o

O en formato JSON: capacitor.config.ts Opciones de Configuración 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;

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

opción acepta tres valores:

__CAPGO_KEEP_0__ adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__

1. `"auto"` (Recomendado)

adjustMarginsForEdgeToEdge: 'auto'

¿Qué hace?: Verifica automáticamente para Android 15+ y el windowOptOutEdgeToEdgeEnforcement configuración. Ajusta las márgenes inteligentemente en función del dispositivo y la configuración.

Mejor para: La mayoría de las aplicaciones de producción que desean una pantalla completa en dispositivos compatibles mientras mantienen la compatibilidad con versiones de Android más antiguas.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

¿Qué hace?: Fuerza ajustes de márgenes para una pantalla completa independientemente de la versión de Android o otras configuraciones.

Mejor para: Las aplicaciones que desean el comportamiento de pantalla completa en todas las versiones de Android compatibles.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

¿Qué hace?: Deshabilita completamente las ajustes automáticos de márgenes.

Mejor para: Aplicaciones que manejan manualmente la disposición de borde a borde o no desean el comportamiento de borde a borde.

Nota: Actualmente "disable" es el valor predeterminado, pero esto cambiará a "auto" en Capacitor 8.

Por qué esto importa para Android 15+

Con Android 15, Google está imponiendo la pantalla de borde a borde como el comportamiento predeterminado. Las aplicaciones que no manejan correctamente las disposiciones de borde a borde pueden experimentar problemas de interfaz de usuario como:

Contenido oculto detrás de las barras del sistema
Espaciado y relleno incómodo
Apariencia inconsistente en diferentes dispositivos
Experiencia del usuario deficiente

Al utilizar la configuración oficial, asegura que tu aplicación maneje estos cambios correctamente sin necesidad de un __CAPGO_KEEP_0__ personalizado. adjustMarginsForEdgeToEdge config, you ensure your app handles these changes properly without custom code.

Aquí tienes un ejemplo de configuración completo para una aplicación moderna __CAPGO_KEEP_0__:

Here’s a complete example configuration for a modern 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;

Al utilizar una pantalla de borde a borde, es posible que debas agregar algún CSS para manejar áreas seguras:

Prueba tu Configuración

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

Después de configurar

prueba tu aplicación en: adjustMarginsForEdgeToEdgeDispositivos Android 15+

- Verifica que el contenido respete correctamente las barras del sistema Versiones antiguas de Android
Dispositivos Android antiguos - Asegúrese de la compatibilidad hacia atrás
Diferentes tamaños de pantalla - Verifique que los diseños funcionen en dispositivos diferentes
Temas claros y oscuros - Pruebe ambos modos de tema

Errores comunes a evitar

No utilice plugins para esto

No necesita plugins de terceros como capacitor-edge-to-edge o similares. La configuración nativa maneja esto limpiamente. Si necesita un control fino sobre el navegador del sistema después de habilitar adjustMarginsForEdgeToEdge, @capgo/capacitor-barra de navegación y @capgo/indicador de inicio complemente la configuración nativa sin reemplazarla.

No mezclar con implementaciones manuales

Si está utilizando adjustMarginsForEdgeToEdge, elimine cualquier manejo manual de ajustes de ventanas o trucos CSS que haya agregado.

No olvide el CSS de área segura

La configuración maneja ajustes de margen, pero todavía necesita usar CSS de área segura para un relleno de contenido adecuado.

Guía de Migración

Si actualmente está utilizando plugins o trucos para edge-to-edge:

Elimine cualquier plugin de edge-to-edge de sus dependencias
Agregue la opción de configuración a su capacitor.config.ts
Limpia y reconstruye tu proyecto de Android
Prueba exhaustivamente en dispositivos objetivo

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

# Rebuild
npx cap copy android
npx cap open android

Preparación para el futuro

Recuerda que Capacitor 8 hará "auto" el valor predeterminado. Para prepararse:

Prueba con "auto" ahora para detectar cualquier problema temprano
Actualiza tu CSS para manejar las áreas seguras correctamente
Revisa tus diseños en dispositivos con pantalla de borde a borde habilitada

Recursos adicionales

Conclusión

La pantalla de borde a borde en Capacitor no requiere plugins, trucos ni complicadas soluciones de trabajo. La opción de configuración proporciona una solución limpia y nativa que está oficialmente respaldada y futura. adjustMarginsForEdgeToEdge Comienza con

para la mayoría de las aplicaciones, prueba exhaustivamente en dispositivos y agrega CSS de área segura adecuado. Tu aplicación estará lista para Android 15 y más allá con un mínimo de esfuerzo. "auto" Tienes alguna pregunta o estás teniendo problemas?

Preguntas o estás teniendo problemas? The comunidad de Capacitor y la documentación oficial son recursos excelentes para obtener ayuda adicional. documentación oficial son recursos excelentes para obtener ayuda adicional.

Continúa desde la pantalla de Capacitor sin plugins

Si estás utilizando la pantalla de Capacitor sin plugins para planificar el comportamiento de medios y interfaz nativos, conecta con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-video, @capgo/capacitor-reproductor-de-video para el detalle de implementación en @capgo/capacitor-reproductor-de-video, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.

Display de Lado a Lado en Capacitor Sin Plugins