                Mobile Playground
            

TeezU Mobile Test Playground

React 19 · Vite 7 · Tailwind CSS 4 · PWA (VitePWA) | v7.0 · April 2026

📲 PWA Install Prompt VitePWA

🔞

TeezU toevoegen

Installeer als app op je scherm

manifest.json ✓ standalone · portrait

service worker ✓ StaleWhileRevalidate (assets)

strategy API ✓ NetworkFirst (/api/*)

beforeinstallprompt detecting…

👆 Touch Target Validator 44px min

WCAG 2.5.5 — all interactive elements must be ≥ 44×44 px. Dashed border = measured zone.

Button 1 measuring…
Button 2 measuring…
Too Small mock ✗ 32px height (below 44px)

🧭 Bottom Navigation Role-Based

Items shown depend on user role. Pink dashed = Creator only, gold dashed = Admin only.

💬Chat

🔍Discover

📺Live

👤Profiel

Active role: fan

📱 Safe Area Insets env()

Notch / Dynamic Island / home bar support via env(safe-area-inset-*)

safe-area-inset-top    —
safe-area-inset-bottom —
safe-area-inset-left   —
safe-area-inset-right  —

↑ padding-top = env(safe-area-inset-top)

📐 Viewport Height 100dvh

Mobile browsers change visible height as chrome shows/hides. Use 100dvh (dynamic viewport height) instead of 100vh.

window.innerHeight          —
document.documentElement.clientHeight —
100vh (CSS px)              —
100dvh support              checking…

Scrollable zone uses 100dvh ✓

🎨 Gradient Styles Tailwind CSS 4

Own Message with Gradient

Other Message

📜 Custom Scrollbar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliqua. React 19 · Vite 7 · Tailwind CSS 4 · TeezU v7.0 · April 2026. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut labore et dolore.