Problèmes liés à l'adaptation des pages HTML5 à iPhoneX

Auteur：Eve Cole Date de mise à jour：2025-02-01 03:24:01

1. Introduction à iPhoneX

taille de l'écran

Le résumé des dimensions de développement de la série iPhone que nous connaissons est le suivant :

△Taille de développement de chaque modèle d'iPhone

Convertissez à la taille de pixel bien connue :

△Dimensions multidimensionnelles de chaque modèle

La carte de grossissement est en fait la relation de grossissement entre la taille des pixels et la taille du développement, mais ce n'est qu'une manifestation externe. Le principal facteur d'influence du grossissement est le PPI (DPI). Comprendre la relation entre la densité de l'écran et les différentes tailles nous aidera à comprendre en profondeur le concept de grossissement : "Apprenez les bases ! Guide DPI adapté aux concepteurs》

Dans cette mise à niveau, la taille de l'écran et la résolution de l'iPhone8 ont hérité des belles traditions de l'iPhone6 et des versions ultérieures ;

Cependant, l'iPhone X a subi des changements majeurs en termes de taille d'écran, de résolution et même de forme. Prenons l'iPhone 8 comme référence pour voir comment nous devrions envisager l'adaptation de l'iPhone X.

Jetons un coup d'œil aux changements de taille de l'iPhone X :

2. Adaptation iPhoneX --- zone de sécurité (zone de sécurité)

Les opinions d’Apple sur la conception de l’iPhone X sont les suivantes :

Le contenu principal doit se trouver dans la zone de sécurité pour garantir qu'il n'est pas masqué par les coins arrondis (coins) de l'appareil, le boîtier du capteur (boîtier du capteur, frange complète) et l'indicateur d'accueil en bas. En d’autres termes, le contenu que nous concevons afficher doit se trouver autant que possible dans la zone de sécurité ;

3. Adaptation de iPhoneX ---Schéma d'adaptation viewport-fit 3.1 Adaptation de PhoneX, la balise méta de viewport-fit est utilisée comme schéma d'adaptation dans iOS 11, la valeur par défaut de viewport-fit est auto.

La valeur de viewport-fit est la suivante :

auto	Par défaut : viewprot-fit:contain ; le contenu de la page est affiché dans la zone sécurisée.
couverture	viewport-fit:cover, le contenu de la page remplit l'écran

paramètre de balise méta adaptée à la fenêtre (lors de la couverture)

 <meta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover>

3.2 Introduction à la fonction CSS constant() et à Safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom

Comme indiqué ci-dessus, WebKit dans iOS 11 inclut une nouvelle fonction CSS constant() et un ensemble de quatre constantes prédéfinies : safe-area-inset-left, safe-area-inset-right, safe-area -inset-top et safe. -zone-encart-bas. Lorsqu'ils sont combinés, les styles peuvent faire référence à la taille de la zone de sécurité de chaque aspect.

3.1 Lorsque nous définissons viewport-fit:contain, qui est l'heure par défaut ; définissons safe-area-inset-left, safe-area-inset-right, safe-area-inset-top et safe-area-inset-bottom, etc. Les paramètres n'ont aucun effet.

3.2 Lorsque nous définissons viewport-fit:cover : les paramètres sont les suivants

 body { padding-top: constant(safe-area-inset-top); //La hauteur de la barre de navigation + barre d'état est de 88px padding-left: constant(safe-area-inset-left); n'est pas vertical Is 0 padding-right: constant(safe-area-inset-right); //Si l'écran n'est pas vertical, il est 0 padding-bottom : constant(safe-area-inset-bottom);//La hauteur de l'arc inférieur est de 34px }

4. Adaptation iPhoneX --- statistiques de hauteur

viewport-fit:couverture + barre de navigation

5. Adaptation iPhoneX --- requête multimédia

Notez que 690 px (hauteur de la zone de sécurité) est utilisé ici, et non 812 px ;

 Écran @media uniquement et (largeur : 375 px) et (hauteur : 690 px){ body { background : blue }}

6. ajustement de la fenêtre iPhoneX

Résumé du problème

1. Lorsque la page iPhoneX utilise des couleurs dégradées ; if viewport-fit:cover;

1.1 La différence entre une couleur unique et une couleur dégradée est définie lorsque la couleur d'arrière-plan est définie. S'il s'agit d'une couleur unique, elle remplira tout l'écran. Si une couleur dégradée est définie, elle ne sera rendue qu'à la hauteur de. l'élément enfant ; et la hauteur de la page n'est que de 690 px. Utilisez le padding-top:88px ;

Le corps est fixé à :

 <body><div class=content>ceci est un sous-élément</div></body>

1. En monochrome :

 * { padding : 0 ; margin : 0 ; } body { background:green ; padding-top : constant (safe-area-inset-top) //88px /*padding-left : constant (safe-area-inset-left); );*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }

2. Couleur dégradée

 * { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: constant(safe-area-inset-left);*/ /*padding-right : constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }

Comment résoudre le problème de l'utilisation d'un dégradé de couleur pour remplir tout l'écran ? Les paramètres CSS sont les suivants :

 <!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Conception de sites Web pour iPhone X : respecter les zones de sécurité</title> <style> * { padding : 0 ; margin : 0 ; } html, body { hauteur : 100 % ; body { padding-top : constante (zone de sécurité-inset-top ); constant (zone de sécurité-inset-left); padding-right: constante (zone de sécurité-inset-right); padding-bottom: constante (zone de sécurité-inset-bottom); dégradé(linéaire, 0 0, 0 bas, de(#ffd54f), à(#ffaa22)); largeur : 100 % ; hauteur : 724 px ; </style></head><body><div class=content>ceci est un sous-élément</div></body></html>

2. L'élément de page utilise une adaptation de positionnement fixe : {position:fixed;}

2.1 Lorsque la page de l'élément enfant est fixée en bas ; lors de l'utilisation de viewport-fit:contain; vous pouvez voir que lorsque bottom:0 est affiché, il ne sera affiché que dans la zone de sécurité ;

 <!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>Concevoir des sites Web pour iPhone X : respecter les zones de sécurité</title> <style> * { padding: 0; 0; 100%;*/ /*}*/ body { background: gray; /*padding-top: constant(safe-area-inset-top);*/ /*padding-left: constant(safe-area-inset-left );*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ } .top { width: 100 % ; hauteur : 44 px ; arrière-plan : violet ; } .bottom { position : gauche : 0 ; droite : 44 px; head><body> <div class=top>c'est le haut</div> <div class=bottom>c'est le bas</div></body></html>

2.1 Lorsque la page de l'élément enfant est fixée en bas ; lors de l'utilisation de viewport-fit:cover; vous pouvez voir que bottom:0 ne sera affiché que dans la zone de sécurité ;

Ajouter du HTML, du corps {largeur : 100 % ; hauteur : 100 %}

Figure 1 :

 * { padding : 0 ; margin : 0 ; } html, body { hauteur : 100 % ; body { background : gris ; padding-top : constant (safe-area-inset-top) ; zone-encart-gauche); padding-right: constante (zone de sécurité-encart-droite); padding-bottom: constante (zone de sécurité-encart-bas); largeur : 100 % ; hauteur : 44 px ; arrière-plan : violet ; } .bottom { position : gauche : 0 ; droite : 44 px ;

Figure 2 :

 * { padding : 0 ; margin : 0 ; } html, body { hauteur : 100 % ; body { background : gris ; padding-top : constant (safe-area-inset-top) ; zone-encart-gauche); padding-right: constant(safe-area-inset-right); /*padding-bottom: constant(safe-area-inset-bottom);*/ } .top { largeur : 100 % ; hauteur : 44 px ; arrière-plan : violet ; } .bottom { position : bas : 0 ; droite : 44 px ;

2.3 Solution à la couche de masque contextuel alertView

 <!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=no>--> <meta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover> <méta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { marge : 0 } html, corps { largeur : 100 % ; hauteur : 100 % ; corps { taille de police : 0,32rem ; constant(zone de sécurité-encart-haut); padding-left: constant(zone de sécurité-encart-gauche); padding-right: constante(zone de sécurité-encart-droite); -inset-bottom); } .content { text-align: center; } .testBut { margin: 50px auto; 1px gris foncé uni ; contour : aucun ; sélection par l'utilisateur : aucun ; couleur d'arrière-plan : jaune } </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> <section class=content> <button class=testBut onclick=showLoading()>Chargement de pop-up</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title : rappel chaleureux, //Contenu du titre : l'adhésion VIP est sur le point d'expirer, //Obtenez un nouveau isKnow : false }); var xx = new UIAlertView(); console.log(xx); </script></body></html>

Résumer

Ce qui précède est ce que l'éditeur vous présente sur l'adaptation des pages HTML5 à iPhoneX. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !