Función nativa
Cabeceras bajo la Dynamic Island y barras de pestañas bajo el indicador de inicio: el clásico rechazo por diseño. Guías por herramienta con los ajustes, el CSS y las llamadas a la barra de estado para tu stack.
Desde $109 de pago único por plataforma, o deja que nuestro equipo lo haga todo desde $698.
En iOS, autoAdjustSafeAreaInsets está activado, así que el WebView empieza debajo de la barra de estado, el notch o la Dynamic Island. La barra toma statusBarBackgroundColor y statusBarTextColor (blanco o negro), con darkModeStatusBarBackgroundColor y darkModeStatusBarTextColor para el modo oscuro. En Android, el color sale de colorPrimaryDark en style.xml y el texto de blackStatusBarText.
Para una imagen de cabecera a sangre, un mapa o un vídeo, pon transparentStatusBar en true y autoAdjustSafeAreaInsets en false en iOS, o TRANSPARENT_STATUS_BAR en Android. A partir de ahí, tu CSS se encarga de los insets: viewport-fit=cover más env(safe-area-inset-*) en cada elemento fijo.
Las barras inferiores hechas con CSS suelen quedar debajo del indicador de inicio del iPhone. Añádeles padding con env(safe-area-inset-bottom), o deja que WebViewGold añada una franja nativa bajo la página con bottombar y bottombarBackgroundColor (iPadBottombar para iPad, documentación del área segura).
Google Play exige ahora que las apps nuevas y las actualizaciones apunten a Android 16 (nivel de API 36), donde las apps ya no pueden desactivar el modo edge-to-edge: la ventana se extiende detrás de las barras de estado y de navegación, y la app debe gestionar los insets. La plantilla de WebViewGold se mantiene al día con estos cambios de plataforma (las actualizaciones son gratuitas), así que compila desde la versión actual y prueba la zona de la barra de gestos en un teléfono real.
| Síntoma | iOS (Config.swift) | Android (Config.java, style.xml) | Desde tu app web |
|---|---|---|---|
| Cabecera oculta bajo el notch o la Dynamic Island | Mantén autoAdjustSafeAreaInsets activado (por defecto) | Mantén TRANSPARENT_STATUS_BAR desactivado | Solo en edge-to-edge: padding-top: env(safe-area-inset-top) |
| Barra de estado blanca sobre una cabecera oscura | statusBarBackgroundColor = color de la cabecera | colorPrimaryDark = color de la cabecera | statusbarcolor://R,G,B por página |
| Hora y batería ilegibles en modo oscuro | darkModeStatusBarBackgroundColor, darkModeStatusBarTextColor | blackStatusBarText; statusbartextcolor://white en tiempo de ejecución | prefers-color-scheme; en Android también la variable inyectada isDarkMode |
| Barra de pestañas bajo el indicador de inicio o la barra de gestos | bottombar + bottombarBackgroundColor | Color de la barra de navegación con bottombarcolor://, texto con navbartextcolor:// | padding-bottom: env(safe-area-inset-bottom) |
| Vídeo, juego o visor de fotos a pantalla completa | hidebars://on: el fondo de la barra de estado se vuelve transparente y la hora sigue visible | hidebars://on: las barras de estado y de navegación se ocultan; deslizar desde arriba las recupera | hidebars://off cuando el usuario sale de la pantalla |
Sí, por defecto. En iOS, autoAdjustSafeAreaInsets mantiene la página debajo de la zona de la barra de estado en todas las formas de dispositivo, y la barra muestra el color que hayas configurado. Solo tienes que gestionar los insets en CSS cuando cambias a propósito a una barra de estado transparente.
Sí. Navega a statusbarcolor://R,G,B desde JavaScript (por ejemplo statusbarcolor://15,23,42) y WebViewGold cambia el color de la barra de estado, elige texto blanco o negro y ajusta la barra inferior de iOS o la barra de navegación de Android. statusbartextcolor://white o statusbartextcolor://black fija el color del texto de forma explícita.
O bien a la metaetiqueta viewport le falta viewport-fit=cover, o bien WebViewGold sigue colocando la página dentro del área segura (el comportamiento por defecto), en cuyo caso 0 es correcto y nada se solapa. Con transparentStatusBar activado y autoAdjustSafeAreaInsets desactivado, los valores pasan a ser reales.
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.
$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 principal$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 gratuita$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.
Garantía de aprobación en App Store & Google Play – o te devolvemos el dinero en 14 días
¿Prefieres delegarlo? Full Service: configuramos, compilamos y entregamos en 72 horas, desde $698 por plataforma. ¿Preguntas? Chatea con nosotros 24/7.
Los reembolsos se conceden bajo las condiciones indicadas en nuestras FAQ: un rechazo por motivos ajenos al contenido por parte de Apple y/o Google, reclamado dentro de los 14 días posteriores a la compra.
