Replit + safe area
Une app Replit parfaite dans le navigateur peut voir son en-tête passer sous la Dynamic Island, sa barre d'onglets sous l'indicateur d'accueil, ou son horloge disparaître en blanc sur blanc en mode sombre. Par défaut, WebViewGold garde votre page dans la safe area et colore la barre d'état nativement ou depuis JavaScript. Voici quand vous y fier, et quand passer en bord à bord avec du CSS.
Dès $109 en paiement unique par plateforme, ou notre équipe s'occupe de tout dès $698.
Sur iOS, autoAdjustSafeAreaInsets est activé : la WebView commence sous la barre d'état, l'encoche ou la Dynamic Island. La barre prend statusBarBackgroundColor et statusBarTextColor (blanc ou noir), avec darkModeStatusBarBackgroundColor et darkModeStatusBarTextColor pour le mode sombre. Sur Android, la couleur vient de colorPrimaryDark dans style.xml et le texte de blackStatusBarText.
Pour une image hero pleine largeur, une carte ou une vidéo, passez transparentStatusBar à true et autoAdjustSafeAreaInsets à false sur iOS, ou TRANSPARENT_STATUS_BAR sur Android. Dès lors, c'est votre CSS qui gère les insets : viewport-fit=cover plus env(safe-area-inset-*) sur chaque élément fixe.
Les barres inférieures créées en CSS se retrouvent souvent sous l'indicateur d'accueil de l'iPhone. Ajoutez-leur un padding env(safe-area-inset-bottom), ou laissez WebViewGold ajouter une bande native sous la page avec bottombar et bottombarBackgroundColor (iPadBottombar pour les iPad, documentation de la safe area).
Google Play exige désormais que les nouvelles apps et les mises à jour ciblent Android 16 (niveau d'API 36), où les apps ne peuvent plus désactiver le bord à bord : la fenêtre s'étend derrière la barre d'état et la barre de navigation, et l'app doit gérer les insets. Le modèle WebViewGold suit ces évolutions de la plateforme (les mises à jour sont gratuites) : compilez à partir de la version actuelle et testez la zone de la barre de gestes sur un vrai téléphone.
Collez ceci dans Replit pour implémenter la partie app web. Vérifiez le résultat, publiez, puis testez dans l'app WebViewGold.
Cette app tourne dans le wrapper natif WebViewGold (son user agent contient "WebViewGold"). 1. Remplacez les mises en page pleine hauteur en h-screen et 100vh par 100dvh. 2. Donnez à la zone de saisie ou à la barre d'actions fixée en bas padding-bottom: max(8px, env(safe-area-inset-bottom)) et vérifiez que le dernier message ou la dernière ligne n'est pas caché derrière. 3. Ajoutez viewport-fit=cover à la balise meta viewport. 4. Ajoutez un mode plein écran pour les graphiques ou les présentations qui, uniquement dans l'app, navigue vers hidebars://on à l'entrée et vers hidebars://off à la sortie. 5. Ajoutez setStatusBar(r, g, b), qui navigue vers statusbarcolor://r,g,b dans l'app, et appelez-la avec la couleur de l'en-tête au chargement de la page. 6. Testez la mise en page à 320 px de large et en mode paysage.
Je suis très content d'avoir acheté cette application ! Extrêmement facile et excellente documentation. J'ai été en contact avec le service client, ils ont répondu très rapidement et très amicalement. Ils ont résolu ma question en un jour. 10/10 recommanderaient.
| Symptôme | iOS (Config.swift) | Android (Config.java, style.xml) | Depuis votre app web |
|---|---|---|---|
| En-tête caché sous l'encoche ou la Dynamic Island | Laissez autoAdjustSafeAreaInsets activé (par défaut) | Laissez TRANSPARENT_STATUS_BAR désactivé | Seulement en bord à bord : padding-top: env(safe-area-inset-top) |
| Barre d'état blanche au-dessus d'un en-tête sombre | statusBarBackgroundColor = couleur de l'en-tête | colorPrimaryDark = couleur de l'en-tête | statusbarcolor://R,G,B par page |
| Horloge et batterie illisibles en mode sombre | darkModeStatusBarBackgroundColor, darkModeStatusBarTextColor | blackStatusBarText ; statusbartextcolor://white à l'exécution | prefers-color-scheme ; sur Android, aussi la variable injectée isDarkMode |
| Barre d'onglets sous l'indicateur d'accueil ou la barre de gestes | bottombar + bottombarBackgroundColor | Couleur de la barre de navigation via bottombarcolor://, texte via navbartextcolor:// | padding-bottom: env(safe-area-inset-bottom) |
| Vidéo, jeu ou visionneuse photo en plein écran | hidebars://on : le fond de la barre d'état devient transparent, l'horloge reste | hidebars://on : les barres d'état et de navigation disparaissent ; un balayage depuis le haut les fait revenir | hidebars://off quand l'utilisateur quitte l'écran |
Les écrans d'une app Replit ont souvent des couleurs d'en-tête différentes (un hero sombre sur la page d'accueil, une page de réglages blanche). Réglez la barre par route ; statusbarcolor:// est la commande principale, qui choisit aussi une couleur de texte lisible et ajuste la barre inférieure iOS ou la barre de navigation Android. iOS ne traite qu'un appel au pont par exécution de script, alors envoyez uniquement celui-ci :
const inApp = navigator.userAgent.includes("WebViewGold"); // votre token de user agent personnalisé
let lastColor = "";
function setStatusBar(r, g, b) {
const color = r + "," + g + "," + b;
if (!inApp || color === lastColor) return;
lastColor = color;
window.location.href = "statusbarcolor://" + color;
}
// RVB par écran (convertissez une fois les couleurs hex, hsl ou oklch du thème)
const BAR_COLORS = {
"/": [15, 23, 42], // hero sombre
"/settings": [255, 255, 255],
};
// à appeler après le premier rendu et après chaque changement de route côté client
function onRouteChange(path) {
const c = BAR_COLORS[path] || [255, 255, 255];
setStatusBar(c[0], c[1], c[2]);
}Seulement si votre design a besoin de contenu derrière la barre d'état ; sinon, gardez les réglages par défaut.
iOS : transparentStatusBar = true et autoAdjustSafeAreaInsets = false. Android : TRANSPARENT_STATUS_BAR = true. C'est un changement natif, qui nécessite un nouveau build.
Dans la balise meta viewport de votre app Replit (ou dans le réglage viewport de votre framework) : width=device-width, initial-scale=1, viewport-fit=cover. Sans cela, les valeurs env() restent à zéro sur iOS.
Les en-têtes reçoivent padding-top: max(12px, env(safe-area-inset-top)), les barres inférieures padding-bottom: max(8px, env(safe-area-inset-bottom)), et les éléments ancrés sur les côtés les insets gauche et droit pour le mode paysage. Les toasts, les feuilles et les fenêtres modales positionnés en top: 0 sont ceux qu'on oublie.
Ce que renvoie env(safe-area-inset-*) peut varier selon les versions d'Android WebView : ne vous y fiez donc pas uniquement. Testez la barre d'état transparente sur un téléphone récent avec navigation par gestes et gardez les fallbacks max() ci-dessus.
Un iPhone avec Dynamic Island, le plus petit iPhone que vous trouverez, un iPad en paysage et un téléphone Android avec navigation par gestes, chacun en mode clair et sombre. Les examinateurs utilisent ces appareils et font une capture de tout chevauchement au titre de la guideline 4.0 (corriger un refus de design 4.0).
Oui, par défaut. Sur iOS, autoAdjustSafeAreaInsets maintient la page sous la zone de la barre d'état quelle que soit la forme de l'appareil, et la barre affiche la couleur que vous avez configurée. Vous ne gérez les insets en CSS que si vous passez délibérément à une barre d'état transparente.
Oui. Naviguez vers statusbarcolor://R,G,B depuis JavaScript (par exemple statusbarcolor://15,23,42) et WebViewGold recolore la barre d'état, choisit un texte blanc ou noir et ajuste la barre inférieure iOS ou la barre de navigation Android. statusbartextcolor://white ou statusbartextcolor://black définit explicitement la couleur du texte.
Soit la balise meta viewport ne contient pas viewport-fit=cover, soit WebViewGold place encore la page dans la safe area (le comportement par défaut) : dans ce cas, 0 est correct et rien ne se chevauche. Avec transparentStatusBar activé et autoAdjustSafeAreaInsets désactivé, les valeurs deviennent réelles.
Sur iOS, définissez darkModeStatusBarBackgroundColor et darkModeStatusBarTextColor dans Config.swift. Sur Android, WebViewGold injecte la variable JavaScript isDarkMode, pour que votre page puisse appeler statusbarcolor:// avec la bonne couleur ; prefers-color-scheme fonctionne en CSS sur les deux plateformes.
Cela peut l'être. Du contenu sous la barre d'état, des commandes masquées par l'indicateur d'accueil et des fenêtres modales tronquées sont des constats de design typiques de la guideline 4.0, et ils donnent à l'app l'allure d'un site web coincé dans un téléphone, ce qui alimente aussi une discussion autour de la 4.2.
Même résultat, charge de travail différente de votre côté. Les trois formules incluent la garantie d'approbation et le support humain 24/7.
$109 par plateforme, paiement unique
La licence WebViewGold : un projet Xcode ou Android Studio prêt à l'emploi. Collez votre URL, définissez le nom et l'icône, activez les fonctionnalités, compilez et soumettez. Mises à jour gratuites à vie.
Voir les offres sur la page principale$349 par licence, extension en paiement unique
Ni Mac, ni Xcode, ni Android Studio : configurez dans le navigateur, nous compilons les deux apps dans le cloud et les transmettons à App Store Connect et à la Play Console.
Comment fonctionne le Cloud Builder Essayer la démo gratuite$698 par plateforme $798
Envoyez-nous votre URL et votre icône. Notre équipe configure, compile et livre votre app sous 72 heures, en marque blanche, projets sources inclus. Les deux plateformes pour $1,158.
Détails du Full Service Propulsé par
Prix Soldes d'hiver valables jusqu'au 31 décembre 2026.
Garantie d'approbation App Store & Google Play – ou remboursement sous 14 jours
Vous préférez déléguer ? Full Service : nous configurons, compilons et livrons sous 72 heures, dès $698 par plateforme. Des questions ? Chattez avec nous 24/7.
Les remboursements sont accordés aux conditions indiquées dans notre FAQ : un refus non lié au contenu par Apple et/ou Google, demandé dans les 14 jours suivant l'achat.