Pantalla de bordes sin bordes en Capacitor sin plugins

¿Estás intentando implementar la pantalla de bordes sin bordes en tu aplicación Capacitor? No necesitas ningún truco, plugin o workaround. Capacitor tiene soporte oficial para la pantalla de bordes sin bordes a través de la adjustMarginsForEdgeToEdge opción de configuración - simplemente no está bien documentada.

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

¿Qué es la pantalla de bordes a bordes?

La pantalla de bordes a bordes permite que el contenido de la 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 bordes a bordes como estándar para todas las aplicaciones.

La Solución Oficial: ajustarMárgenesParaBordesAABBorde

Capacitor proporciona la adjustMarginsForEdgeToEdge opción de configuración específica para este propósito. Esto se documenta en la 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

El adjustMarginsForEdgeToEdge La

1. "auto" acepta tres valores:

adjustMarginsForEdgeToEdge: 'auto'

(Recomendado) ¿Qué hace: windowOptOutEdgeToEdgeEnforcement Verifica automáticamente Android 15+ y la

ajusta las márgenes de manera inteligente según el dispositivo y la configuración. Lo mejor para:

2. "force"

adjustMarginsForEdgeToEdge: 'force'

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. ¿Qué hace:

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

3. "disable"

adjustMarginsForEdgeToEdge: 'disable'

¿Qué hace: Deshabilita ajustes de márgenes automáticos por completo.

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

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

¿Por qué esto importa para Android 15+

Comenzando con Android 15, Google está imponiendo el comportamiento de pantalla de borde a borde como comportamiento predeterminado. 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
• Aspecto inconsistente entre dispositivos
• Experiencia de usuario deficiente

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

Ejemplo Completo

Aquí tienes un ejemplo de configuración completo 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 un display de borde a borde, es posible que debas agregar algunos CSS para manejar á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 de tu Configuración

Después de configurar adjustMarginsForEdgeToEdgePrueba 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 claros y oscuros - 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 similar. La configuración nativa maneja esto limpiamente. Si necesita control fino sobre el navegador del sistema después de habilitar adjustMarginsForEdgeToEdge, @capgo/capacitor-barra-de-navegación y @capgo/indicador-de-página-inicial complementa la configuración nativa sin reemplazarla.

No Mezclar con Implementaciones Manuales

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

No Olvide el CSS de Área Segura

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

Guía de Migración

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

1. Elimine cualquier plugin de pantalla de borde a borde de sus dependencias
2. Agregar la opción de configuración a su capacitor.config.ts
3. Limpie y reconstruya su proyecto de Android
4. Pruebe 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. Pruebe con "auto" ahora para detectar cualquier problema lo antes posible
2. Actualice su CSS para manejar las áreas de seguridad correctamente
3. Revisar sus diseños en dispositivos habilitados para pantallas de borde a borde

Recursos adicionales

• Documentación oficial de la configuración de Capacitor
• Directrices de Android para pantallas de borde a borde
• CSS Inserciones de área segura

Conclusión

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

Comience con "auto" Para la mayoría de las aplicaciones, pruebe exhaustivamente en dispositivos y agregue CSS de área segura adecuada. Su aplicación estará lista para Android 15 y más con un mínimo de esfuerzo.

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

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

Si está utilizando la pantalla de borde a borde en Capacitor Sin plugins para planificar el comportamiento de medios y interfaz nativa, conecte con Usando @capgo/capacitor-live-actividades 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-videos, @capgo/capacitor-reproductor-de-videos 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.