Cette fois, je vais vous présenter les problématiques liées à l'adaptation des pages HTML5 sur iPhoneX. Quelles sont les précautions concernant l'adaptation des pages HTML5 sur iPhoneX. Ce qui suit est un cas pratique, prenons un. regarder.
1. Introduction à l'iPhoneX
Taille de l'écran
Le multiplicateur est en fait le rapport entre la taille des pixels et la taille de 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, la taille, la résolution et même la forme a tous subi des changements majeurs. Prenons l'iPhone 8 comme référence pour voir comment nous devrions envisager l'adaptation de l'iPhone X.
2. Adaptation iPhoneX --- zone de sécurité (zone de sécurité)
Les avis d'Apple sur l'iPhone Le contenu doit être dans la zone de sécurité pour s'assurer qu'il n'est pas bloqué par les coins arrondis de l'appareil ( coins), le boîtier du capteur (boîtier du capteur, encoche) et l'indicateur d'accueil en bas. C'est-à-dire que le contenu que nous concevons et affichons doit se trouver autant que possible dans la zone de sécurité 3 Adaptation de l'iPhoneX --- Schéma d'adaptation viewport-fit 3.1 Adaptation de PhoneX, adopté dans iOS 11. La balise méta de viewport-fit est utilisée comme solution d'adaptation ; la valeur par défaut de viewport-fit est auto.
les valeurs de viewport-fit sont les suivantes :
auto Par défaut : viewprot-fit:contain ; le contenu de la page est affiché dans la zone de sécurité
cover viewport-fit : couverture, contenu de la page Remplissez l'écran
paramètre de balise méta viewport-fit (lors de la couverture)
3.2 fonction css constant() et safe-area-inset-top &safe-area- inset-left &safe- Introduction à area-inset-right &safe-area-inset-bottomComme indiqué ci-dessus, WebKit dans iOS 11 inclut une nouvelle fonction CSS constant() et un ensemble de quatre constantes prédéfinies : zone de sécurité en médaillon à gauche, zone de sécurité en médaillon à droite, zone de sécurité en médaillon en haut et zone de sécurité en médaillon en bas. Lorsqu'ils sont combinés, les styles peuvent faire référence à la taille de la zone de sécurité de chaque aspect.<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.1 Lorsque nous définissons viewport-fit:contain, qui est l'heure par défaut ; définissons les paramètres safe-area-inset-left, safe-area-inset-right, safe-area-inset-top et safe-. tels que Area-Inset-bottom n'ont aucun effet.
3.2 Lorsque nous définissons viewport-fit:cover : les paramètres sont les suivants
4 Adaptation iPhoneX --- statistiques de hauteurviewport-fit:cover. + Barre de navigationbody { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constant(safe-area-inset-right); //如果未竖屏时为0 padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px }
5. Adaptation iPhoneX---
Requête médiaNotez que la hauteur utilisée ici est de 690 px (hauteur de la zone de sécurité), et non de 812 px ;
6.iphoneX viewport-fitRésumé du problème@media only screen and (width: 375px) and (height: 690px){ body { background: blue; } }
1. Lorsque la page iphoneX utilise des couleurs dégradées ; 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'écran. élément enfant ; et la hauteur de la page n'est que de 690 px. Utilisez ce qui précède. Le padding-top:88px;
body est fixé sur :
1. >2. Couleur dégradée ><body><div class="content">this is subElement</div></body>
* { 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);*/ }
* { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); 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);*/ }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> <title>Designing Websites for iPhone X: Respecting the safe areas</title> <style> * { padding: 0; margin: 0; } html, body { height: 100%; } body { 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); } .content { background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); width: 100%; height: 724px; } </style> </head> <body> <div class="content">this is subElement</div> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!