L'iPhone X a introduit des changements significatifs en termes de taille d'écran, de résolutino et de forme par rapport aux modèles précédents comme l'iPhone 8. Pour garantir une expérience utilisateur optimale, il est crucial de prendre en compte ces différences.

Zones de sécurité et conception

Apple recommande que le contenu principal de l'application soit placé à l'intérieur des "zones de sécurité". Cela évite que les éléments d'interface ne soient masqués par les coins arrondis, le capteur d'encoche (le "notch") et l'indicateur d'accueil en bas de l'écran.

Adaptation des pages H5

Pour les pages web intégrées (H5), deux approches principales sont recommandées :

1. Meta tag viewport-fit : Ce tag contrôle la manière dont le contenu s'adapte à la zone d'affichage.

   • auto (défaut) : Le contenu est contenu dans les zones de sécurité.
   • cover : Le contenu remplit tout l'écran, y compris les zones potentiellement masquées.

2. Propriétés CSS constant() et env() : Lorsqu'on utilise viewport-fit: cover, les variables d'environnement comme safe-area-inset-top, safe-area-inset-left, safe-area-inset-right et safe-area-inset-bottom peuvent être utilisées pour ajuster le rembourrage. ```css

   body { padding-top: env(safe-area-inset-top); /* Ajuste pour la barre supérieure / padding-left: env(safe-area-inset-left); / Ajuste pour le côté gauche (si applicable) / padding-right: env(safe-area-inset-right); / Ajuste pour le côté droit (si applicable) / padding-bottom: env(safe-area-inset-bottom); / Ajuste pour la barre inférieure */ }

Adaptation des mini-programmes (Mini Apps)

L'approche viewport-fit n'est pas directement applicable aux mini-programmes. Il n'existe pas d'API spécifique pour gérer les écrans "non rectangulaires" comme l'iPhone X. Les barres de tabulation par défaut des mini-programmes ont été adaptées en ajoutant une barre blanche et en surélevant le contenu. Pour une adaptation personnalisée, on peut utiliser l'API wx.getSystemInfo pour détecter le modèle de l'appareil.

wx.getSystemInfo({
 success: (res) => {
   // Vérifie si le modèle correspond à un iPhone X ou similaire
   if (res.model.toLowerCase().includes('iphone x')) {
     this.setData({
       isIphoneX: true
     });
   }
 }
});
 

Une fois qu'une variable globale comme isIphoneX est définie, elle peut être utilisée dans les fichiers WXML et WXSS.

Exemple WXML :

<view class="{{isIphoneX ? 'iphone-x-footer' : 'default-footer'}}">
 Zone de bas de page personnalisée
</view>
 

Exemple WXSS :

.iphone-x-footer {
 padding-bottom: 68rpx; /* Ajustement pour la zone inférieure */
}

.iphone-x-footer::after {
 content: ' ';
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 68rpx; /* Hauteur de la zone de sécurité inférieure */
 background-color: #ffffff; /* Couleur de fond pour masquer la zone */
}
 

La valeur de 68rpx correspond à la hauteur combinée de la zone de sécurité inférieure et de la barre d'indicateur d'accueil sur l'iPhone X.