Problème d'adaptation de l'affichage de la page H5 sur iPhoneX

Cette fois je vais vous présenter le problème d'adaptation de l'affichage des pages H5 sur iPhoneX Quelles sont les précautions pour adapter l'affichage des pages H5 sur iPhoneX Voici un cas pratique, jetons un oeil.

1. Introduction à l'iPhoneX

Taille de l'écran

Un résumé des tailles de développement de la série iPhone que nous sommes familier est le suivant :

△ La taille de développement de chaque modèle d'iPhone

est convertie en taille de pixel bien connue :

△ La taille multidimensionnelle de chaque modèle

L'image multidimensionnelle est en fait le rapport entre la taille des pixels et la taille du développement, mais ce n'est qu'une manifestation extérieure. 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 la résolution de l'iPhone 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.

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

2. Zone iPhone)

Avis d'Apple sur la disposition du design de l'iPhone La zone garantit qu'elle ne sera pas obscurcie 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. 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 iPhoneX

---fenêtre d'affichage de la solution d'adaptation ; -fit 3.1 L'adaptation PhoneX utilise la balise méta de viewport-fit comme solution d'adaptation dans iOS 11 ; la valeur par défaut de viewport-fit est auto ;

La valeur de viewport-fit est la suivante :

auto	默认：viewprot-fit:contain;页面内容显示在safe area内
cover	viewport-fit:cover,页面内容充满屏幕

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

Fonction 3.2 css constant() et safe-area-inset-top &safe-area-inset-left &safe-area-inset-right Introduction de &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 -zone-encart-gauche, zone de sécurité-encart-droite, zone de sécurité-encart-haut et zone de sécurité-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 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

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       
}

Adaptation iPhoneX --- statistiques de hauteur

viewport-fit:cover + barre de navigation

　

Adaptation iPhoneX ---Requête média

Notez que la hauteur de la zone de sécurité est de 690 pixels et non de 812 pixels ;

@media only screen and (width: 375px) and (height: 690px){
    body {
        background: blue;
    }
}

6.Porte d'affichage iPhoneX - adaptée

Résumé du problème

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

1.1 Lors de la configuration du couleur d'arrière-plan, la différence entre une couleur unique et une couleur dégradée est que 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 pixels, comme indiqué ci-dessus. L'utilisation de padding-top:88px;

　

body est fixée à :

<body><p class="content">this is subElement</p></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));
           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);*/
       }

La solution pour utiliser la couleur dégradée pour toujours remplir tout l'écran est la suivante

<!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>
<p class="content">this is subElement</p>
</body>
</html>

2. Éléments de page L'adaptation utilisant le positionnement fixe est : {position:fixed;>

2.1 Lorsque la page du sous-élément est fixe en bas lors de l'utilisation de viewport- ; fit:contain; vous pouvez voir que bottom:0 ne sera affiché que dans le coffre-fort. Dans la zone

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1">
   <!--<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 {
           background: grey;
           /*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%;
           height: 44px;
           background: purple;
       }
       .bottom {
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           height: 44px;
           color: black;
           background: green;
       }
   </style>
</head>
<body>
   <p class="top">this is top</p>
   <p class="bottom">this is bottom</p>
</body>
</html>

2.1 Lorsque la page du sous-élément est fixée à the bottom; lorsque vous utilisez viewport-fit:cover; vous pouvez voir que bottom:0 ne sera affiché que dans le coffre-fort. Dans la zone

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

Figure 1 :

* {
           padding: 0;
           margin: 0;
       }
       html,body {
           height: 100%;
       }
       body {
           background: grey;
           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%;
           height: 44px;
           background: purple;
       }
       .bottom {
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           height: 44px;
           color: black;
           background: green;
       }

Figure 2 :

* {
           padding: 0;
           margin: 0;
       }
       html,body {
           height: 100%;
       }
       body {
           background: grey;
           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%;
           height: 44px;
           background: purple;
       }
       .bottom {
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           height: 44px;
           color: black;
           background: green;
       }

2.3 Solution concernant le calque de masque contextuel alertView

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


   

       弹框加载
   
   
   <script>
       function showLoading() {
           UIAlertView.show({
               type:"input",
               title:"温馨提示",              //标题
               content:"VIP会员即将到期",     //获取新的
               isKnow:false
           });
           var xx = new UIAlertView();
          console.log(xx);
       }
   </script>

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

Lecture recommandée :

Utilisez H5 pour ajouter et désactiver la mise à l'échelle

Comment WebGL exploite les graphiques json et echarts

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!