Cabecera bajo el reloj
Tu cabecera fija empieza en el borde superior de la pantalla, así que los iconos de la barra de estado quedan encima de tu logotipo y de tu botón de menú.
Qué cambió en Android 15 y Android 16
En las apps que se dirigen a Android 15 (API level 35), Android 15 muestra la app edge-to-edge (de borde a borde) por defecto. La barra de estado y la barra de navegación por gestos se vuelven transparentes, y el sistema ya no empuja tu contenido por debajo de ellas; con la navegación de tres botones, la barra es translúcida. Salvo que la app aplique los insets de la ventana, parte de su contenido queda debajo de las barras del sistema. La forma tradicional de colorear la barra de estado, setStatusBarColor, está obsoleta y no tiene efecto en Android 15 para estas apps.
Android 15 todavía ofrecía una exclusión temporal mediante un atributo del tema. En las apps que se dirigen a Android 16 (API level 36), esa exclusión está obsoleta y desactivada en los dispositivos con Android 16. Google Play exige que las apps nuevas y las actualizaciones se dirijan al API level 36, así que a una subida nueva no le queda ninguna exclusión: la app tiene que gestionar los insets.
Qué muestra la Play Console
Los problemas de edge-to-edge no llegan como un rechazo de política clásico. Aparecen como recomendaciones en el panel de la versión, con títulos como "Edge-to-edge may not display for all users" y "Your app uses deprecated APIs or parameters for edge-to-edge". La segunda enumera llamadas como Window.setStatusBarColor o setNavigationBarColor y las clases en las que se originan, que a menudo son bibliotecas y no tu propio código.
El riesgo real es lo que ve la gente: un icono de menú bajo el reloj que no se puede tocar, o un botón de pago detrás de la barra de gestos. Un revisor puede tratarlo como funcionalidad rota, y los usuarios seguro que lo mencionan en las reseñas. La guía de funcionalidad rota cubre los demás problemas del día del lanzamiento de las apps empaquetadas.
Síntomas en una app web empaquetada
Barra de pestañas detrás del indicador de gestos
Una barra de navegación con position: fixed; bottom: 0 acaba debajo de la píldora de gestos o de la barra de tres botones, y los toques van a la barra del sistema.
Iconos de la barra de estado invisibles
Con una barra transparente, los iconos blancos sobre una página blanca, o los negros sobre una oscura, desaparecen.
Relleno doble
La capa nativa y tu CSS añaden los dos espacio para las barras, lo que deja una franja vacía gruesa arriba o abajo.
Teclado que tapa los campos
Los campos cerca del final de un formulario se esconden bajo el teclado cuando el diseño ignora el visual viewport.
Mi WebView de iOS finalmente está aprobada. ¡Gracias!
Elige un único responsable de los insets
| Configuración | Ajustes de WebViewGold para Android | Tu CSS |
|---|---|---|
| La capa nativa mantiene la página por debajo de las barras (recomendado para la mayoría de las apps) | TRANSPARENT_STATUS_BAR false: una barra de estado opaca con el color colorPrimaryDark de style.xml; blackStatusBarText para iconos oscuros sobre un color claro | No hace falta nada. Mantén el CSS de safe area de abajo como red de seguridad; cuando la capa nativa ya mantiene la página lejos de las barras, no debería añadir espacio extra. Confírmalo una vez en un dispositivo. |
| La página se dibuja detrás de la barra de estado (pantalla completa real) | TRANSPARENT_STATUS_BAR true | viewport-fit=cover en la meta etiqueta viewport, relleno env(safe-area-inset-top) en la cabecera y el inset inferior en las barras inferiores fijas |
| Navegación inferior nativa | ENABLE_NAVIGATION_FOOTER true, entradas en res/menu/menu_drawer.xml | Oculta dentro de la app tu propia barra de pestañas fija para que no se apilen las dos |
| Pantallas inmersivas (vídeo, juegos, quiosco) | hidebars://on y hidebars://off desde JavaScript | Las barras vuelven al deslizar desde el borde; mantén los controles importantes lejos de los bordes |
CSS seguro para edge-to-edge en tu app web
Primero añade viewport-fit=cover a la meta etiqueta viewport: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. Después añade relleno a los elementos fijos con los insets de safe area. El mismo CSS funciona en la app de iOS; la guía de safe area de la Directriz 4.0 cubre los ajustes de iOS.
css
:root {
--inset-top: env(safe-area-inset-top, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
--inset-left: env(safe-area-inset-left, 0px);
--inset-right: env(safe-area-inset-right, 0px);
}
/* Cabecera fija: el contenido empieza por debajo de la barra de estado */
.app-header {
position: sticky;
top: 0;
padding-top: calc(12px + var(--inset-top));
padding-left: calc(16px + var(--inset-left));
padding-right: calc(16px + var(--inset-right));
}
/* Barra de pestañas fija: queda por encima del indicador de gestos o de la barra de botones */
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: calc(8px + var(--inset-bottom));
}
/* Espacio para la barra de pestañas y unidades de viewport dinámicas en lugar de 100vh */
main {
min-height: 100dvh;
padding-bottom: calc(72px + var(--inset-bottom));
}Corrígelo paso a paso
Más o menos una hora, casi toda probando en dos emuladores.
Actualiza la plantilla en lugar de subir el targetSdk
Los proyectos antiguos de WebViewGold se dirigían a un API level inferior a 35 y nunca tuvieron que ocuparse de edge-to-edge. Subir el número a mano se salta el código que lo acompaña. La plantilla actual incluye el trabajo en la barra de estado para Android 15 (a partir de la versión 16.4 del registro de cambios) y mejoras posteriores de la barra de estado; traslada tus ajustes como se describe en la guía del target API level, o recompila en el Cloud Builder.
Decide quién se encarga de los insets
Para la mayoría de las apps hechas con vibe coding, la configuración nativa es la más segura:
TRANSPARENT_STATUS_BARen false y el color de tu marca comocolorPrimaryDark. Elige la configuración transparente solo si tu diseño necesita contenido detrás de la barra de estado, y en ese caso gestiona los insets en CSS de forma coherente.Ajusta los colores y el contraste de los iconos
Configura
blackStatusBarTextsegún tu color. Si el color cambia según la página (modo oscuro, una cabecera de color), cámbialo desde JavaScript constatusbarcolor://R,G,Bystatusbartextcolor://whiteostatusbartextcolor://black;bottombarcolor://ynavbartextcolor://hacen lo mismo con la barra de navegación de Android. Consulta la API Dynamic UI.Añade el CSS, solo para la app si lo prefieres
Pon el CSS de safe area en tu app web, o en el custom.css del proyecto si solo debe aplicarse dentro de la app. Sustituye
100vhpor100dvhen las pantallas de altura completa.Prueba la matriz
Emuladores de Android 15 y Android 16, cada uno una vez con navegación por gestos y otra con navegación de tres botones; un perfil de dispositivo con muesca de pantalla; horizontal, donde
HIDE_NAVIGATION_BAR_IN_LANDSCAPEpuede ayudar; y un formulario con el teclado abierto. En cada uno, revisa la cabecera, la barra inferior y el primer y el último elemento de las listas.Sube y vuelve a revisar el panel
Súbela con un version code más alto. Puede quedar una recomendación sobre APIs obsoletas que apunte a una biblioteca; lo que importa es que nada de tu interfaz quede bajo una barra del sistema.
Prompt: haz que tu app web sea segura para edge-to-edge
El prompt no toca el diseño de escritorio y solo añade los insets.
Pégalo en Lovable, Bolt, Cursor o Claude Code
Mi app web también se ejecuta dentro de apps nativas de Android e iOS (WebViewGold). Android 15 y posteriores dibujan las apps edge-to-edge, así que los elementos fijos pueden acabar debajo de la barra de estado y de la barra de navegación. Actualiza el diseño: 1. Añade viewport-fit=cover a la meta etiqueta viewport existente y conserva sus demás valores. 2. Define variables CSS para env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left) y env(safe-area-inset-right), cada una con un valor de respaldo de 0px. 3. Añade el inset superior al padding de la cabecera sticky o fija, y el inset inferior al padding de cada barra inferior fija, botón de acción flotante y banner de cookies. 4. Añade el padding inferior correspondiente al contenido principal para que el último elemento no quede oculto detrás de la barra inferior. 5. Sustituye 100vh por 100dvh en los diseños de altura completa. 6. No cambies colores, espaciados ni comportamiento en un navegador de escritorio normal. Enumera cada archivo y cada selector que hayas cambiado.
Lista de comprobación de edge-to-edge
- Compilada desde la plantilla actual de WebViewGold, no desde un proyecto antiguo con el targetSdk subido.
- Un único responsable de los insets: nativo (barra de estado opaca) o CSS (barra de estado transparente), nunca los dos.
- Iconos de la barra de estado legibles en todas las páginas, en modo claro y oscuro.
- La cabecera y la barra inferior quedan libres de las barras del sistema con navegación por gestos y de tres botones.
viewport-fit=covermás rellenoenv(safe-area-inset-*)en los elementos fijos.- Probada en Android 15 y 16, en vertical y horizontal, con el teclado abierto.
Preguntas frecuentes
¿Puedo seguir excluyéndome de edge-to-edge en Android?
No en una subida nueva. El atributo de exclusión funcionaba para las apps que se dirigían al API level 35; para las que se dirigen al API level 36 está desactivado en los dispositivos con Android 16, y Google Play exige ahora el API level 36 para las apps nuevas y las actualizaciones.
¿Por qué son invisibles los iconos de mi barra de estado?
La barra tiene el mismo color que los iconos, normalmente porque es transparente sobre una cabecera clara u oscura. Configura blackStatusBarText según el color de tu barra de estado, o cámbialo por página con statusbartextcolor://white o statusbartextcolor://black.
¿El edge-to-edge de Android afecta a mi app de iOS?
No, pero iOS tiene sus propias safe areas. WebViewGold para iOS las gestiona por defecto con autoAdjustSafeAreaInsets, y el CSS de esta página funciona en ambas apps.
La Play Console dice que uso setStatusBarColor, pero nunca lo he escrito. ¿Por qué?
La recomendación enumera llamadas encontradas en cualquier parte del bundle, incluidas bibliotecas como los componentes de Material. Es una recomendación, no un rechazo. Mantén actualizados la plantilla y sus SDK y asegúrate de que las barras del sistema no tapan tu interfaz.
El diseño en tablet cambió después de la actualización. ¿Tiene relación?
En parte. En las apps que se dirigen a Android 16, Android ignora las restricciones de orientación y de redimensionamiento en pantallas grandes (ancho mínimo de 600 dp o más), así que un bloqueo en vertical en TABLET_ORIENTATION puede dejar de aplicarse ahí. Asegúrate de que tu app web tenga un diseño utilizable en tablet y en horizontal.
Tres formas de llevar tu app a las tiendas
El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.
Hazlo tú mismo
$109 por plataforma, pago único
La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.
Ver planes en la página principalCloud Builder
$349 por licencia, complemento de pago único
Sin Mac, sin Xcode, sin Android Studio: configura en el navegador, compilamos ambas apps en la nube y las entregamos a App Store Connect y a Play Console.
Cómo funciona el Cloud Builder Prueba la demo gratuitaFull Service
$698 por plataforma $798
Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.
Detalles del Full Service Con tecnología de
Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.