Chevauchement de la safe area
En-têtes fixes sous la barre d'état ou la Dynamic Island, onglets du bas sous l'indicateur d'accueil, fenêtres modales coupées en haut. Corrigez avec les marges (insets) décrites ci-dessous.
Ce qu'attend la 4.0
La section 4 couvre le design. Apple attend des apps qu'elles soient utiles, intuitives et conformes aux Human Interface Guidelines ; un examinateur refuse au titre de la 4.0 quand l'interface est de qualité insuffisante : contenu tronqué, chevauchement avec l'interface système, commandes trop petites, mises en page inadaptées à l'appareil, ou une expérience qui n'a manifestement pas été pensée pour un téléphone. C'est une question d'appréciation, c'est pourquoi le texte du refus contient généralement une capture d'écran avec un cercle rouge, qui vous montre exactement quoi corriger.
Pour les apps web encapsulées, les causes sont prévisibles : la page ignore les safe areas, les boutons ont été conçus pour une souris, les breakpoints s'arrêtent à la largeur tablette, et l'iPad reçoit soit une mise en page de téléphone étirée, soit le site desktop en tout petits caractères.
Les quatre reproches 4.0 faits aux apps web
Zones tactiles
Liens et icônes de moins de 44 × 44 points, menus qui nécessitent le survol, cases à cocher de 14 px. Agrandissez en CSS, ajoutez du padding, supprimez les états qui n'existent qu'au survol.
Interface desktop sur un téléphone
Barres latérales, tableaux de données à défilement horizontal, texte en 12 px, bandeau cookies sur le premier écran, pied de page avec quarante liens. Masquez ou reconstruisez pour les petits écrans.
Mise en page iPad
Une mise en page de téléphone étirée sur 13 pouces, ou le site desktop avec le contenu collé contre un bord. Donnez à la tablette son propre breakpoint ou limitez l'app à l'iPhone ; voir la prise en charge de l'iPad pour les apps web encapsulées.
Corrigez les safe areas avec les réglages WebViewGold et le CSS
Décidez qui gère les marges
Par défaut,
autoAdjustSafeAreaInsetsvaut true : WebViewGold maintient votre page entre la barre d'état et l'indicateur d'accueil, etstatusBarBackgroundColor,darkModeStatusBarBackgroundColoretstatusBarTextColorpeignent la barre d'état à vos couleurs. Cela suffit à corriger la plupart des chevauchements d'en-tête.Design bord à bord : confiez les marges au CSS
Pour placer du contenu derrière la barre d'état, réglez
transparentStatusBarsur true etautoAdjustSafeAreaInsetssur false, ajoutez viewport-fit=cover à votre balise meta viewport, puis donnez aux éléments fixes un padding basé sur env(safe-area-inset-top) et env(safe-area-inset-bottom), comme dans l'extrait ci-dessous.Correctif rapide pour la barre Home
Si votre navigation du bas se trouve sous l'indicateur d'accueil et que vous ne pouvez pas modifier le site aujourd'hui, réglez
bottombarsur true avecbottombarBackgroundColor(etiPadBottombarsi nécessaire). WebViewGold ajoute une barre native sous la page. Documentation : modifier la safe area.Ou utilisez le pied de navigation natif
Réglez
showNavFootersur true et définissez les onglets dans FooterBar.json. Une barre d'onglets native respecte la safe area par conception et donne à l'app un vrai ressenti d'app, ce qui aide aussi pour la guideline 4.2.Agrandissez les zones tactiles avec du CSS propre à l'app
Ajoutez des règles à
custom.cssdans le projet WebViewGold ; elles ne s'appliquent que dans l'app, le site web reste donc intact (documentation du CSS personnalisé). Visez au minimum 44 px de hauteur et de largeur pour les boutons, onglets et liens-icônes.Supprimez les artefacts de navigateur
Réglez
preventZoomsur true (pas de pincement accidentel),preventoverscrollsur true (pas d'espace élastique au-dessus de votre en-tête) etdisablecalloutsur true (pas d'aperçu de lien à l'appui long). Réglezorientationipadselon ce que votre mise en page prend en charge.
Avec une bonne version optimisée de votre application Web, vous pouvez avoir une superbe application mobile en quelques minutes. De plus, le service client est très agréable et très utile! Je ne peux que recommander WebViewGold :-)
CSS pour la safe area et les zones tactiles
Placez ceci dans custom.css (propre à l'app) ou dans votre feuille de style globale. La balise meta viewport dans le head de votre HTML doit contenir viewport-fit=cover pour que les valeurs env() ne soient pas nulles.
css
/* head : meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
.app-header { position: sticky; top: 0; padding-top: calc(12px + var(--safe-top)); }
.bottom-nav { position: fixed; bottom: 0; padding-bottom: calc(8px + var(--safe-bottom)); }
/* zones tactiles de 44 x 44 pt minimum */
button, .btn, .tab, .icon-link { min-height: 44px; min-width: 44px; }
body { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* éléments réservés au site web, masqués dans l'app */
.cookie-banner, .site-footer, .store-badges, .open-in-app-bar { display: none !important; }Les indices de desktop que les examinateurs capturent
- Une navigation qui s'ouvre au survol ; sur iOS, le premier toucher ouvre, le second navigue, et rien ne paraît naturel.
- Des tableaux plus larges que l'écran, avec défilement horizontal au lieu de cartes.
- Une boîte de dialogue de consentement aux cookies ou un bandeau « Téléchargez notre app » sur le premier écran de l'app.
- Un texte courant de moins de 16 px, ou des champs de saisie de moins de 16 px qui déclenchent un zoom au focus.
Questions fréquentes
WebViewGold gère-t-il les safe areas automatiquement ?
Oui, par défaut. autoAdjustSafeAreaInsets maintient la page dans la safe area et la barre d'état prend la couleur configurée. Vous ne passez à une gestion manuelle en CSS que pour les designs bord à bord.
Puis-je publier uniquement pour iPhone pour éviter le reproche sur l'iPad ?
Vous pouvez limiter la cible à l'iPhone dans Xcode. Apple teste quand même l'app sur iPad en mode compatibilité, mais la juge alors comme une app iPhone. Une vraie mise en page tablette reste la meilleure réponse à long terme.
Le refus montre une capture d'une fenêtre modale coupée en haut. Pourquoi ?
Les fenêtres modales positionnées avec top: 0 ignorent la marge de la barre d'état. Ajoutez à la modale un padding env(safe-area-inset-top) ou laissez autoAdjustSafeAreaInsets activé pour que la WebView elle-même commence sous la barre d'état.
Trois façons de mettre votre app dans les stores
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.
Faites-le vous-même
$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 principaleCloud Builder
$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 gratuiteFull Service
$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.