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

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-bottom

Comme 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 hauteur

viewport-fit:cover. + Barre de navigation

body {
    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édia

Notez 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-fit

Ré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>

La solution pour utiliser la couleur dégradée pour toujours remplir tout l'écran ; les paramètres CSS sont les suivants

* {
           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);*/       
       }

Je vous crois. J'ai maîtrisé la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

* {
           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);*/
       }

Comment écrire un menu déroulant de saisie HTML

<!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>

Comment gérer l'espace vide ci-dessus et en dessous du formulaire lors de l'insertion d'un formulaire Une ligne

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!