Seitenansicht WebView
In der letzten Lektion haben wir gelernt, wo sich unsere Seiten-Benutzeroberfläche befindet. In dieser Lektion lernen wir weiter.
Verstehe die einzelne native Webansicht (WebView)
Alle mit NativePHP erstellten mobilen Apps nutzen eine einzelne native Webansicht (WebView) als zentralen Träger. Mit der WebView kannst du beliebige vertraute Frontend-Webtechnologien zur Erstellung der App-Oberfläche (UI) verwenden. Da es sich im Grunde um eine Webseite handelt, rendert der integrierte Browser diese Seiteninhalte.
Die WebView füllt standardmäßig den gesamten sichtbaren Bereich aus. Wenn Funktionen wie die Kamera geöffnet werden, wird die WebView vorübergehend durch die Kamera-Bedienoberfläche überdeckt.
Grundprinzip von NativePHP: PHP-Backend + hybride Entwicklung mit beliebigen Frontend-Stacks (Vue, jQuery, Tailwind usw.)
Die WebView wird dauernd im Vordergrund angezeigt, nur Vollbild-Szenarien wie Kamera oder integrierter Browser verdecken sie. Alle sichtbaren UI-Oberflächen werden ausschließlich von der WebView gerendert.
Tiefenarchitektur von NativePHP Mobile: Einziger WebView-Container ohne native Mehrseiten-Ebenen. Das bedeutet, NativePHP besitzt nur eine einzige Seite; alle Seitenwechsel und Zurück-Navigation laufen innerhalb derselben WebView ab.
Eine NativePHP-Mobile-App besitzt stets genau ein einziges natives WebView-Steuerelement. Das gesamte Seitenrendering der App findet innerhalb dieses einen Web-Containers statt:
- Seitenwechsel, Router-Umschaltung, Zurück zur vorherigen Seite, Popups, Unterseiten und SPA-Wechsel erstellen niemals eine zweite WebView. Dadurch wird der Speicherverbrauch minimiert.
- Es gibt keine nativen Mehrseiten-Stacks unter Android / iOS sowie keine Activity/ViewController-Seitenhierarchien;
- Die sichtbaren „mehreren Seiten“ sind lediglich DOM-Umschaltungen innerhalb derselben WebView über Frontend-Routing (Laravel / Livewire / Vue Router u.a.), identisch mit der Logik von klassischen Single-Page-Webanwendungen.
1 Viewport-Konfiguration (Steuerung der Bildschirmanpassung per Meta-Tag)
Jeder, der schon mobile Webseiten entwickelt hat, kennt diese Einstellung.
Wie ein normaler Browser besitzt die WebView das Konzept des Viewports (sichtbarer Seitenbereich), gesteuert über ein Meta-Tag mit identischer Syntax wie bei herkömmlichen Webseiten.
<meta name="viewport" content="width=device-width, initial-scale=1">Code-Sprache: HTML, XML (xml)Füge dieses Meta-Tag in deine HTML- oder Blade-PHP-Seite ein. Heutzutage verwenden fast alle Webseiten diese Konfiguration, um sich an mobile Browser anzupassen. Fehlt sie, wird die Seite nach PC-Browser-Standards gerendert: Schrift wirkt dünn, das Layout ist unschön verzerrt, da Mobilgeräte eine hohe DPI-Auflösung haben.
Du kannst es auf jeder beliebigen Webseite testen, z.B. die offizielle NativePHP-Dokumentation: Web View – NativePHP mobile v3 – NativePHP. Rechtsklicke die Seite und zeige den Quellcode an, um das Tag zu sehen.
Diese Einstellung enthält zwei Kernattribute:
width=device-width: Die Seitenbreite entspricht der physischen Bildschirmbreite des Geräts
initial-scale=1: Anfangs-Skalierungsfaktor 1:1, keine automatische Vergrößerung/Verkleinerung
2 Deaktivieren der Zweifinger-Zoomfunktion (Nachbildung nativer App-Erfahrung)
Native Android- oder iOS-Apps erlauben standardmäßig keinen Zoom mit zwei Fingern, mobile Browser hingegen schon. Um deine NativePHP-Oberfläche wie eine native App wirken zu lassen, musst du diese Zoom-Geste abschalten.
Bei der mobilen App-Entwicklung benötigt man volle Kontrolle über die Anzeige. Das Deaktivieren des manuellen Zooms sorgt für das gleiche Verhalten wie eine reine native App.
Füge dem vorhandenen Viewport-Tag folgendes Attribut hinzu:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">Code-Sprache: HTML, XML (xml)user-scalable=no: Deaktiviert manuelle Zoom-Gesten
3 Randloser Bildschirmrendering Edge-to-Edge (Voraussetzung für Notch / gebogene Bildschirme)
Um maximale Gestaltungsfreiheit für die UI zu gewähren, füllt die WebView standardmäßig den gesamten Bildschirm aus. Nur mit HTML/CSS/JS kannst du Inhalte beliebig im Vordergrund platzieren.
Aber nicht der gesamte Bildschirmbereich ist uneingeschränkt nutzbar. Die meisten Geräte haben eine Kamera-Notch, abgerundete Ecken, gebogene Ränder oder die Dynamic Island bei iPhones. Diese Bereiche gehören zwar zum Viewport, verdecken aber Inhalte und sind nicht antippbar.
Um Sonderbildschirme anzupassen, füge im Meta-Viewport-Tag viewport-fit=cover hinzu und kombiniere es mit Sicherheitsabständen (Safe Area Insets).
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">Code-Sprache: HTML, XML (xml)viewport-fit=cover: Erlaubt das Rendering bis an die äußersten Bildschirmränder (auch Notch und abgerundete Ecken). Das Attribut allein reicht jedoch nicht, da Inhalte durch die Notch verdeckt werden. Du musst es unbedingt mit den Safe-Area-CSS-Stilen kombinieren, siehe unten.
Sicherheitsbereiche Safe Areas
Sicherheitsbereiche sind die nicht verdeckten sichtbaren Bereiche des Bildschirms: Sie werden weder durch Hardware-Strukturen (abgerundete Ecken, Kamera-Notch, Dynamic Island) noch durch dauernde System-Oberflächen (untere Gestenleiste, Statusleiste) überdeckt.
Das Gerät berechnet automatisch die Grenzen der Sicherheitsbereiche und passt sie dynamisch bei Wechsel zwischen Hoch- und Querformat an. NativePHP stellt eingebaute CSS-Variablen zur geräteübergreifenden adaptiven Layoutgestaltung bereit.
<!-- Globale Sicherheitsbereichsbeschränkung für body -->
<body class="nativephp-safe-area">
<!-- Obere Navigationsleiste mit Seitenabständen für abgerundete Bildschirmecken -->
<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]">
Obere Navigationsleiste
</div>
</body>Code-Sprache: HTML, XML (xml)--inset-top: Oberer Sicherheitsabstand (Höhe Statusleiste / Notch)--inset-bottom: Unterer Sicherheitsabstand (Höhe Gestenleiste)--inset-left: Linker Sicherheitsabstand für gebogene Bildschirme / abgerundete Ecken--inset-right: Rechter Sicherheitsabstand für gebogene Bildschirme / abgerundete Ecken
Diese CSS-Variablen sind fest in NativePHP Mobile integriert und werden automatisch vom Framework eingefügt. Du musst keine externen CSS-Bibliotheken einbinden.
Schnelle globale CSS-Klasse: nativephp-safe-area
Füge diese Klasse einfach deinem HTML-Hauptcontainer hinzu. Sie beschränkt sämtliche Inhalte automatisch auf die Sicherheitsbereiche und vereinfacht die Entwicklung, siehe obiges Beispiel.
Wir vergleichen zuerst ein Beispiel ohne Sicherheitsbereichsanpassung anhand der offiziellen Vorlage, um das Prinzip zu verstehen, danach testen wir auf einem echten Gerät. Hier der Code ohne Sicherheitsbereich:
<div class="fixed top-0 left-0 w-full bg-red-500>
...
</div>
Auf dem Bild siehst du, dass die obere Titelleiste direkt von der Kamera-Notch überdeckt wird.
Im Querformat ist das Ergebnis noch schlechter, siehe nächstes Bild:
Im Querformat entstehen breite leere Bereiche links und rechts, die obere Leiste füllt den Bildschirm nicht vollständig aus und wirkt unschön.
Mit Sicherheitsbereichseinstellungen füge die vordefinierte Klasse zum body-Tag hinzu:
<body class="nativephp-safe-area">
<div class="fixed top-0 left-0 w-full bg-red-500 pl-[var(--inset-left)] pr-[var(--inset-right)]">
...
</div>Code-Sprache: HTML, XML (xml)
Die Benutzeroberfläche füllt nun den gesamten Bildschirm sauber aus.
Code bearbeiten
Wir bearbeiten die Beispieldatei aus der letzten Lektion: welcome.blade.php
Ersetze den Inhalt des body-Tags durch folgenden Code. Wir verwenden Tailwind, eine Frontend-UI-Bibliothek ähnlich Bootstrap.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Mimi') }} - Built with NativePHP ： welcome to foxdevelop.com</title>
</head>
<body>
<div class="fixed top-0 left-0 w-full bg-red-500">
Obere Navigationsleiste
</div>
</body>
</html>
Code-Sprache: HTML, XML (xml)Speichere die Datei, öffne die Eingabeaufforderung im Projektordner und führe diesen Befehl aus:
php artisan native:jumpCode-Sprache: CSS (css)D:\phpproject\my-app>php artisan native:jumpCode-Sprache: CSS (css)
Vorschau-URL: http://127.0.0.1:8000
Eine Vorschau im PC-Browser zeigt keine mobile Anpassung; du musst auf einem echten Gerät testen.
Echtes Gerät Debuggen
Die Vorgehensweise entspricht der normalen Android-App-Entwicklung: Nutze ein Android-Telefon, verbinde es per USB-Kabel mit dem PC und aktiviere den Entwicklermodus am Handy (Anleitung findest du im Internet). Installiere zudem das ADB-Tool von Google zur Steuerung des Handys vom PC aus; es wird mit Android Studio mitgeliefert.
Installiere das komplette Android Studio mit Android SDK und SDK Platform Tools (enthält ADB).
Überprüfe die ADB-Installation:
Öffne das Terminal und gib ein: adb devices
D:\phpproject\my-app>adb devices
List of devices attached
a34354354354352 deviceCode-Sprache: PHP (php)Dieses Beispiel zeigt, dass ein Handy erfolgreich verbunden ist.
Wechsle im CMD zum Projektordner und führe diesen Befehl zum Kompilieren und Installieren der Android-App aus: php artisan native:run android
D:\phpproject\my-app>php artisan native:run android
Running NativePHP for Android
Build log: D:\phpproject\my-app\nativephp\android-build.log
Updating Android configuration ....................................................................... 903.01ms DONE
Copying Laravel source .................................................................................... 18s DONE
Installing Composer dependenciesCode-Sprache: PowerShell (powershell)Beim Kompilieren werden automatisch viele Abhängigkeiten wie Kotlin und Gradle installiert; sorge für eine stabile Internetverbindung.
Bei Proxy-Nutzung bearbeite diese Konfigurationsdatei im Projektpfad: D:\phpproject\my-app\nativephp\android\gradle\wrapper\gradle-wrapper.properties
Tausche die Gradle-Download-Adresse gegen einen inländischen Mirror aus, Beispiel:
#Mon Feb 10 07:33:27 EST 2025
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
#distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
distributionUrl=https\://mirrors.aliyun.com/maven/gradle/gradle-8.13-bin.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
Code-Sprache: Properties (properties)