PWA Theme Test

Platform Davranış Rehberi

🍎

iOS Safari PWA

🍎

iOS Chrome PWA

🤖

Android Chrome PWA

🤖

Android Chrome (Browser)

🖥️

Desktop PWA

Canlı Durum

Display mode: --

User Agent: --

meta theme-color: --

status-bar-style: --

html bg: --

body bg: --

header bg: --

bottom-nav bg: --

Viewport: --

Safe Area Top: --

Safe Area Bottom: --

Renk Katman Yapısı

Loading...

Önemli Notlar

iOS: apple-mobile-web-app-status-bar-style değişikliği uygulamayı kapatıp yeniden açmayı gerektirir. Runtime değişiklik etkisizdir.

Android: theme-color meta tag runtime'da dinamik değiştirilebilir. Anında etki gösterir.

Split Color: Android'de theme-color (üst) ≠ html bg (alt) ile mümkün. iOS'ta sadece black-translucent + header bg ile kısıtlı.

Desktop PWA: theme-color title bar'ı renklendirir. Alt kontrol yoktur.

Scroll Test 1

Bu içerik header ile bottom nav arasında scroll edilebilir olmalı. Overscroll davranışını kontrol edin.

Scroll Test 2

Yukarı ve aşağı bounce scroll yaparak html background renginin görünüp görünmediğini test edin.

Scroll Test 3

iOS'ta elastic scroll sırasında status bar altındaki renk değişimini gözlemleyin.

Scroll Test 4

Android'de overscroll glow efektinin arka plan rengiyle uyumunu kontrol edin.

Scroll Test 5

Bottom navigation altındaki safe area renginin bottom-nav rengiyle uyumunu kontrol edin.

Scroll Test 6

Son kart — bottom nav'ın altına kadar scroll edip arka plan rengini kontrol edin.