L'écran à encoche de l'iPhone Lorsqu'il est fixé en haut, si vous faites glisser la page vers le haut ou vers le bas, il y aura un grand écart si l'arrière-plan est tout blanc, sinon il aura l'air cassé, ce qui est très moche. .
taille de l'écran de l'iphone
La différence de taille entre l'iPhoneX et les autres modèles
La raison du problème ci-dessus est que l'iPhoneX possède une zone de sécurité. La zone de sécurité fait référence à une plage de fenêtre visuelle. Le contenu de la zone de sécurité n'est pas affecté par les coins, le boîtier du capteur et l'indicateur d'accueil, la zone bleue dans la figure ci-dessous. :
En d’autres termes, si l’on veut bien s’adapter, il faut s’assurer que la zone visible et exploitable de la page se trouve dans la zone de sécurité.
Pour les dimensions spécifiques, veuillez consulter les directives de l'interface humaine – iPhoneX
Comment s'adapter ?La première étape consiste à définir la mise en page de la page Web dans la fenêtre visuelle
<meta name=viewport content=width=device-width, viewport-fit=cover>
Une nouvelle fonctionnalité d'iOS11 Afin de s'adapter à l'iPhoneX, Apple a étendu la balise méta viewport existante pour définir la mise en page de la page Web dans la fenêtre visuelle. Trois valeurs peuvent être définies :
Remarque : La page Web qui n'ajoute pas d'extensions par défaut est viewport-fit=contain. Si elle doit être adaptée à iPhoneX, viewport-fit=cover doit être défini. Il s'agit d'une étape clé pour l'adaptation.Pour plus de détails, voir : Le descripteur viewport-fit
Dans un deuxième temps, le contenu principal de la page est limité à la zone de sécurité.
.post { padding : 12px ; padding-left : env (zone de sécurité-inset-left); padding-left : const (zone de sécurité-inset-left ); ); padding-right : const(safe-area-inset-right);} fonction constanteUne nouvelle fonctionnalité d'iOS11, une fonction CSS de Webkit, est utilisée pour définir la distance entre la zone de sécurité et la limite. Il existe quatre variables prédéfinies :
Remarque : Certains navigateurs ne prennent plus en charge la fonction constante et utilisent à la place la fonction env.
Par défaut, si le client gère la zone de sécurité, l'effet est le suivant :
Après avoir utilisé l'attribut plein écran viewport-fit=cover :
Plan des zones de sécurité :
Rendu après limitation de la zone de sécurité :
Le remplissage est défini à 12 pixels au-dessus. Si la direction est pivotée :
La troisième étape consiste à utiliser les méthodes min() et max()
@supports(padding : max(0px)) { .post { padding-left : max(12px, env(safe-area-inset-left)); droite)); }} Élément fixe problème résolu
Si le titre de la page est implémenté sur le front-end et est fixé en haut, il sera bloqué. À ce stade, vous pouvez définir la valeur supérieure sur une valeur de distance de sécurité, par exemple :
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}Article de référence : Conception de sites Web pour iPhone X
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.