Replit + área segura
Una app de Replit que se veía perfecta en el navegador puede perder la cabecera bajo la Dynamic Island, la barra de pestañas bajo el indicador de inicio o la hora en un blanco sobre blanco en modo oscuro. WebViewGold mantiene tu página dentro del área segura por defecto y colorea la barra de estado de forma nativa o desde JavaScript. Aquí verás cuándo basta con eso y cuándo conviene pasar a edge-to-edge con CSS.
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.
Pega esto en Replit para implementar la parte de la web app. Revisa el resultado, publica y luego prueba dentro de la app WebViewGold.
Esta app funciona dentro del envoltorio nativo WebViewGold (su user agent contiene "WebViewGold"). 1. Sustituye los layouts de altura completa con h-screen y 100vh por 100dvh. 2. Dale a la barra inferior fija de escritura o de acciones padding-bottom: max(8px, env(safe-area-inset-bottom)) y asegúrate de que el último mensaje o la última fila no queden ocultos detrás de ella. 3. Añade viewport-fit=cover a la metaetiqueta viewport. 4. Añade un modo de pantalla completa para gráficos o presentaciones que, solo dentro de la app, navegue a hidebars://on al entrar y a hidebars://off al salir. 5. Añade setStatusBar(r, g, b), que navegue a statusbarcolor://r,g,b dentro de la app, y llámalo con el color de la cabecera al cargar la página. 6. Prueba el layout a 320px de ancho y en modo horizontal.
¡Estoy muy feliz de haber comprado esta aplicación! Documentación extremadamente fácil y excelente. Estaba en contacto con el servicio al cliente, respondieron muy rápido y de forma muy amigable. Resolvieron mi pregunta en un día. 10/10 lo recomendaría".
| 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 |
Las pantallas de una app de Replit suelen tener cabeceras de colores distintos (un hero oscuro en la portada, una página de ajustes blanca). Define la barra por ruta; statusbarcolor:// es el comando maestro que además elige un color de texto legible y ajusta la barra inferior de iOS o la barra de navegación de Android. iOS procesa una sola llamada al puente por cada ejecución de script, así que envía solo esta:
const inApp = navigator.userAgent.includes("WebViewGold"); // tu token personalizado de user agent
let lastColor = "";
function setStatusBar(r, g, b) {
const color = r + "," + g + "," + b;
if (!inApp || color === lastColor) return;
lastColor = color;
window.location.href = "statusbarcolor://" + color;
}
// RGB por pantalla (convierte una vez los colores del tema en hex, hsl u oklch)
const BAR_COLORS = {
"/": [15, 23, 42], // hero oscuro
"/settings": [255, 255, 255],
};
// llámala tras el primer renderizado y después de cada cambio de ruta en el cliente
function onRouteChange(path) {
const c = BAR_COLORS[path] || [255, 255, 255];
setStatusBar(c[0], c[1], c[2]);
}Solo si tu diseño necesita contenido detrás de la barra de estado; si no, mantén los valores por defecto.
iOS: transparentStatusBar = true y autoAdjustSafeAreaInsets = false. Android: TRANSPARENT_STATUS_BAR = true. Es un cambio nativo y necesita una nueva compilación.
En la metaetiqueta viewport de tu app de Replit (o en el ajuste de viewport de tu framework): width=device-width, initial-scale=1, viewport-fit=cover. Sin esto, los valores de env() se quedan en cero en iOS.
Las cabeceras llevan padding-top: max(12px, env(safe-area-inset-top)), las barras inferiores padding-bottom: max(8px, env(safe-area-inset-bottom)), y los elementos anclados a los lados, los insets izquierdo y derecho para el modo horizontal. Los avisos (toasts), paneles y modales posicionados en top: 0 son los que más se olvidan.
Lo que devuelve env(safe-area-inset-*) puede variar entre versiones de Android WebView, así que no dependas solo de ello: prueba la barra de estado transparente en un teléfono reciente con navegación por gestos y mantén los fallbacks con max() de arriba.
Un iPhone con Dynamic Island, el iPhone más pequeño que encuentres, un iPad en horizontal y un teléfono Android con navegación por gestos, cada uno en modo claro y oscuro. Los revisores usan estos dispositivos y hacen captura de cualquier solapamiento según la directriz 4.0 (cómo solucionar un rechazo de diseño por la 4.0).
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.
En iOS, define darkModeStatusBarBackgroundColor y darkModeStatusBarTextColor en Config.swift. En Android, WebViewGold inyecta la variable de JavaScript isDarkMode, así que tu página puede llamar a statusbarcolor:// con el color adecuado; prefers-color-scheme funciona en CSS en ambas plataformas.
Puede serlo. El contenido bajo la barra de estado, los controles tapados por el indicador de inicio y los modales recortados son hallazgos de diseño típicos de la directriz 4.0, y hacen que la app parezca un sitio web embutido en un teléfono, lo que además alimenta una discusión sobre la 4.2.
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.