Vista de página WebView
En la clase anterior aprendimos dónde se ubica la interfaz de usuario de nuestra página; continuamos aprendiendo en esta sesión.
Entender la vista web nativa única (WebView)
Todas las aplicaciones móviles desarrolladas con NativePHP tienen como soporte principal una única vista web nativa (WebView). La vista web te permite crear la interfaz de la app con cualquier tecnología frontend web que domines. Al ser básicamente una página web, el navegador integrado se encarga de renderizar todo su contenido.
Por defecto, la WebView ocupa toda la zona visible de la pantalla. Sin embargo, al abrir funciones como la cámara, la interfaz de captura cubre temporalmente la WebView.
Esencia de NativePHP: Backend PHP + desarrollo híbrido con cualquier stack frontend (Vue, jQuery, Tailwind, etc.)
La WebView se muestra siempre en primer plano; solo escenarios a pantalla completa como la cámara o el navegador integrado la ocultan. Toda la interfaz UI visible para el usuario es gestionada por la WebView.
Estructura de bajo nivel de NativePHP Móvil: contenedor WebView único, sin capas de páginas nativas múltiples. Es decir, NativePHP solo cuenta con una sola página; todos los saltos y retornos de navegación ocurren dentro de esa misma WebView.
Cualquier app móvil de NativePHP tiene siempre un único control WebView nativo. Todo el renderizado de páginas de la aplicación se aloja en este único contenedor web:
- Cambios de página, conmutación de rutas, volver a la página anterior, ventanas emergentes, subpáginas y cambios SPA nunca crean una segunda WebView. Este diseño reduce el consumo de memoria.
- No existe pila de páginas nativas en Android/iOS ni jerarquía de Activity/ViewController;
- Las «varias páginas» que vemos no son más que conmutaciones de DOM dentro de la misma WebView mediante el enrutamiento frontend (Laravel / Livewire / Vue Router…), con la misma lógica que las aplicaciones web de una sola página tradicionales.
1 Configuración Viewport (control de adaptación de pantalla con etiqueta meta)
Cualquier desarrollador de webs móviles conoce esta configuración.
Al igual que un navegador común, la WebView cuenta con el concepto de Viewport (área visible), regulado por una etiqueta meta con sintaxis idéntica a las páginas web clásicas.
<meta name="viewport" content="width=device-width, initial-scale=1">Lenguaje del código: HTML, XML (xml)Agrega esta etiqueta meta en tu archivo HTML o Blade PHP. Hoy en día casi todos los sitios web la incluyen para adaptarse a navegadores móviles. Sin ella, el renderizado se basa en pantallas de PC: las fuentes se ven finas y el layout se deforma, ya que los teléfonos tienen una resolución DPI alta.
Puedes comprobarlo en cualquier sitio, por ejemplo la documentación oficial de NativePHP: Web View – NativePHP mobile v3 – NativePHP. Haz clic derecho en la página y revisa el código fuente para ver la etiqueta.
Esta configuración tiene dos atributos principales:
width=device-width: El ancho de la página coincide con el ancho físico de la pantalla del dispositivo
initial-scale=1: Escala inicial de renderizado 1:1, sin zoom automático
2 Deshabilitar zoom con dos dedos (simular experiencia de app nativa)
Las apps nativas de Android o iOS no permiten hacer zoom con dos dedos, a diferencia de los navegadores móviles. Para que tu interfaz de NativePHP se parezca a una app nativa, debes desactivar este gesto de zoom.
Al desarrollar para móviles se requiere un control preciso de la visualización; prohibir el zoom manual logra el mismo comportamiento que una aplicación totalmente nativa.
Agrega el siguiente atributo a tu etiqueta viewport existente:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Lenguaje del código: HTML, XML (xml)user-scalable=no: Desactiva los gestos de zoom manual
3 Renderizado hasta los bordes Edge-to-Edge (requisito previo para muescas y pantallas curvas)
Para maximizar la libertad de diseño de la UI, la WebView ocupa toda la pantalla por defecto. Solo con HTML/CSS/JS puedes colocar contenido en cualquier zona de primer plano.
Sin embargo, no toda la superficie de la pantalla es utilizable. La mayoría de dispositivos tienen muesca para cámara frontal, esquinas redondeadas, bordes curvos o Dynamic Island en iPhone. Estas zonas forman parte del viewport pero ocultan contenido y no son pulsables.
Para adaptarse a pantallas con formas especiales, agrega viewport-fit=cover en la etiqueta meta viewport y combínalo con los márgenes de seguridad (Safe Area Insets).
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">Lenguaje del código: HTML, XML (xml)viewport-fit=cover: Permite renderizar la página hasta los bordes extremos de la pantalla (incluyendo muescas y esquinas redondeadas). Este parámetro por sí solo no es suficiente, ya que el contenido quedará oculto por la muesca; es obligatorio combinarlo