Solapamiento con el área segura
Cabeceras fijas bajo la barra de estado o la Dynamic Island, pestañas inferiores bajo el indicador de inicio, modales cortados por arriba. Arréglalo con los márgenes de área segura que se explican abajo.
Qué espera la 4.0
La sección 4 trata del diseño. Apple espera que las apps sean útiles e intuitivas y que sigan las Human Interface Guidelines; un revisor rechaza por la 4.0 cuando la interfaz no tiene la calidad suficiente: contenido recortado, solapamientos con la interfaz del sistema, controles demasiado pequeños, diseños que no se ajustan al dispositivo o una experiencia que claramente no se hizo para un teléfono. Es una decisión de criterio, así que el texto del rechazo suele incluir una captura con un círculo rojo que te dice exactamente qué arreglar.
En las apps web empaquetadas las causas de fondo son previsibles: la página ignora las áreas seguras, los botones se diseñaron para un ratón, los breakpoints se quedan en el ancho de tablet y el iPad recibe o bien un diseño de teléfono estirado o bien el sitio de escritorio con letra diminuta.
Las cuatro quejas 4.0 en apps web
Áreas táctiles
Enlaces e iconos de menos de 44 por 44 puntos, menús que necesitan hover, casillas de 14 px. Agrándalos en CSS, añade padding y elimina los estados que solo funcionan con hover.
Interfaz de escritorio en un teléfono
Barras laterales, tablas de datos con scroll horizontal, texto de 12 px, banner de cookies en la primera pantalla, pie de página con cuarenta enlaces. Ocúltalo o rehazlo para pantallas pequeñas.
Diseño para iPad
Un diseño de teléfono estirado a 13 pulgadas, o el sitio de escritorio con el contenido pegado a un borde. Dale a la tablet su propio breakpoint o limita la app al iPhone; consulta compatibilidad con iPad para apps web empaquetadas.
Arregla las áreas seguras con ajustes de WebViewGold y CSS
Decide quién gestiona los márgenes
Por defecto
autoAdjustSafeAreaInsetsestá en true: WebViewGold mantiene tu página entre la barra de estado y el indicador de inicio, ystatusBarBackgroundColor,darkModeStatusBarBackgroundColorystatusBarTextColorpintan la barra de estado con tus colores. Solo con esto se arreglan la mayoría de los solapamientos de la cabecera.Diseño edge-to-edge: deja los márgenes al CSS
Para mostrar contenido detrás de la barra de estado, pon
transparentStatusBaren true yautoAdjustSafeAreaInsetsen false, añade viewport-fit=cover a tu meta tag de viewport y da padding a los elementos fijos con env(safe-area-inset-top) y env(safe-area-inset-bottom), como en el fragmento de abajo.Solución rápida para la barra de inicio
Si tu navegación inferior queda bajo el indicador de inicio y hoy no puedes cambiar el sitio, pon
bottombaren true conbottombarBackgroundColor(yiPadBottombarsi hace falta). WebViewGold añade una barra nativa debajo de la página. Documentación: modificar el área segura.O usa el pie de navegación nativo
Pon
showNavFooteren true y define las pestañas en FooterBar.json. Una barra de pestañas nativa respeta el área segura por diseño y hace que la app se sienta como una app, lo que también ayuda con la Directriz 4.2.Agranda las áreas táctiles con CSS solo para la app
Añade reglas a
custom.cssen el proyecto de WebViewGold; se aplican solo dentro de la app, así que el sitio web queda intacto (documentación de CSS personalizado). Apunta a un mínimo de 44 px de alto y de ancho en botones, pestañas y enlaces con icono.Elimina los restos del navegador
Pon
preventZoomen true (sin pellizcos accidentales),preventoverscrollen true (sin hueco elástico sobre la cabecera) ydisablecallouten true (sin vista previa de enlaces al mantener pulsado). Ajustaorientationipada lo que admita tu diseño.
Con una buena versión optimizada de su aplicación web, puedes tener una impresionante aplicación móvil en un par de minutos. ¡Además del servicio al cliente es muy agradable y muy útil! ¡Puedo recomendar WebViewgold :-)
CSS para el área segura y las áreas táctiles
Pon esto en custom.css (solo para la app) o en tu hoja de estilos global. La meta tag de viewport en el head de tu HTML necesita viewport-fit=cover para que los valores de env() no sean cero.
css
/* head: meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
.app-header { position: sticky; top: 0; padding-top: calc(12px + var(--safe-top)); }
.bottom-nav { position: fixed; bottom: 0; padding-bottom: calc(8px + var(--safe-bottom)); }
/* áreas táctiles de 44 x 44 pt como mínimo */
button, .btn, .tab, .icon-link { min-height: 44px; min-width: 44px; }
body { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* elementos exclusivos del sitio web, ocultos dentro de la app */
.cookie-banner, .site-footer, .store-badges, .open-in-app-bar { display: none !important; }Señales de escritorio que los revisores capturan
- Navegación que se abre con hover; en iOS el primer toque la abre, el segundo navega y nada se siente bien.
- Tablas más anchas que la pantalla con scroll horizontal en lugar de tarjetas.
- Un diálogo de consentimiento de cookies o un banner de "Descarga nuestra app" en la primera pantalla de la app.
- Texto de cuerpo por debajo de 16 px, o campos de entrada por debajo de 16 px que provocan zoom al enfocarlos.
Preguntas frecuentes
¿WebViewGold gestiona las áreas seguras automáticamente?
Sí, por defecto. autoAdjustSafeAreaInsets mantiene la página dentro del área segura y la barra de estado toma el color que configuraste. Solo pasas a gestionarlo a mano con CSS en diseños edge-to-edge.
¿Puedo publicar solo para iPhone y evitar la queja del iPad?
Puedes limitar el target a iPhone en Xcode. Apple sigue ejecutando la app en un iPad en modo de compatibilidad, pero entonces la juzga como app de iPhone. Un diseño de tablet como es debido es la mejor respuesta a largo plazo.
El rechazo muestra una captura de un modal cortado por arriba. ¿Por qué?
Los modales posicionados con top: 0 ignoran el margen de la barra de estado. Añade padding al modal con env(safe-area-inset-top) o mantén activado autoAdjustSafeAreaInsets para que el propio WebView empiece debajo de la barra de estado.
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.