Pantalla completa sin plugins en Capacitor

Trying to implement edge-to-edge display in your Capacitor app? No necesitas ningún truco, plugin o solución alternativa. La pantalla de borde a borde está disponible oficialmente en Capacitor a través de la opción de configuración - aunque no está bien documentada. adjustMarginsForEdgeToEdge Muchos desarrolladores se enfrentan a problemas con diseños de borde a borde en aplicaciones __CAPGO_KEEP_0__, especialmente cuando se dirigen a Android 15+. A menudo recurren a plugins o trucos CSS para lograr la apariencia moderna de borde a borde. Pero hay una mejor forma, nativa.

Many developers struggle with edge-to-edge layouts in Capacitor apps, especially when targeting Android 15+. They often resort to custom plugins or CSS hacks to achieve the modern edge-to-edge look. But there’s a better, native way.

La pantalla de borde a borde 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 la pantalla de borde a borde como estándar para todas las aplicaciones.

La Solución Oficial: ajustarMárgenesParaBordeAboro

__CAPGO_KEEP_0__ proporciona la

Capacitor provides the adjustMarginsForEdgeToEdge opción de configuración específicamente para este propósito. Esto se documenta en el documentación de configuración oficial de Capacitor, pero es fácil pasar por alto.

Cómo Configurarlo

Agregar esto a tu 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 en formato JSON?

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

Opciones de Configuración

La adjustMarginsForEdgeToEdge opción acepta tres valores:

1. "auto" (Recomendado)

adjustMarginsForEdgeToEdge: 'auto'

¿Qué hace? Verifica automáticamente para Android 15+ y el windowOptOutEdgeToEdgeEnforcement Ajusta las márgenes de manera inteligente según el dispositivo y la configuración.

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

2. "force"

adjustMarginsForEdgeToEdge: 'force'

¿Qué hace?: Forza ajustes de márgenes para una pantalla de borde a borde sin importar la versión de Android o otras configuraciones.

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

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

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

Mejor para: Las aplicaciones que manejan manualmente el diseño de la pantalla de borde a borde o no desean el comportamiento de pantalla de borde a borde.

Nota: Actualmente "disable" es el valor por defecto, 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 comportamiento por defecto. Las aplicaciones que no manejan correctamente los diseños de borde a borde pueden experimentar problemas de interfaz de usuario como:

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

Al utilizar la configuración oficial adjustMarginsForEdgeToEdge config, asegura que tu aplicación maneje estos cambios correctamente sin necesidad de code personalizado.

Ejemplo Completo

Aquí tienes un ejemplo de configuración completa para una aplicación 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;

Consideraciones de CSS

Al utilizar una pantalla de borde a borde, es posible que debas agregar algunos estilos CSS para manejar las áreas seguras:

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

Prueba tu Configuración

Después de configurar adjustMarginsForEdgeToEdge, prueba tu aplicación en:

1. Dispositivos Android 15+ - Verifica que el contenido respete correctamente las barras del sistema
2. Versiones de Android más antiguas - Asegúrate de la compatibilidad hacia atrás
3. Tamaños de pantalla diferentes - Verifica que los diseños funcionen en dispositivos diferentes
4. Temas claro y oscuro - Prueba ambos modos de tema

Errores comunes a evitar

No utilices plugins para esto

No necesitas plugins de terceros como capacitor-edge-to-edge o similares. La configuración nativa maneja esto de manera limpia. Si necesitas un control fino sobre el sistema de navegación después de habilitar adjustMarginsForEdgeToEdge, @capgo/@capacitor-barra-de-navegación y @capgo/indicador-de-página complementa la configuración nativa sin reemplazarla.

No mezcles con implementaciones manuales

If estás utilizando adjustMarginsForEdgeToEdgeElimina cualquier manejo manual de ajustes de ventanas o trucos CSS que hayas agregado.

No te olvides del CSS de área segura

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

Guía de Migración

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

1. Elimina cualquier plugin de edge-to-edge de tus dependencias
2. Agrega la opción de configuración a tu capacitor.config.ts
3. Limpia y reconstruye tu proyecto de Android
4. 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

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

1. Prueba con "auto" ahora para detectar cualquier problema temprano
2. Actualice su CSS para manejar las áreas seguras correctamente
3. Revisar sus diseños en dispositivos habilitados para pantallas de borde a borde

Recursos Adicionales

• Documentación Oficial de Configuración de Capacitor
• Directrices de Pantalla Lateral en Android
• CSS Ingresos de Área Segura

Conclusión

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

para la mayoría de las aplicaciones, pruebe exhaustivamente en varios dispositivos y agregue CSS de área segura adecuada. Su aplicación estará lista para Android 15 y más allá con un mínimo de esfuerzo. "auto" ¿Tiene alguna pregunta o está teniendo problemas?

La comunidad de __CAPGO_KEEP_0__ y The Capacitor community and __CAPGO_KEEP_0__ son grandes recursos para obtener ayuda adicional.

Sigue adelante desde la pantalla de borde a borde en Capacitor Sin plugins

Si estás utilizando Pantalla de borde a borde en Capacitor Sin plugins para planificar el comportamiento de medios y interfaz nativa, 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-video 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-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.