Problème d'adaptation de l'affichage de la page H5 sur iPhoneX
php中世界最好的语言
Libérer： 2018-03-27 14:21:47
original
5585 Les gens l'ont consulté
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)
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
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;
}
}
Copier après la connexion
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>
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
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
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">
alertView
<script>
function showLoading() {
UIAlertView.show({
type:"input",
title:"温馨提示", //标题
content:"VIP会员即将到期", //获取新的
isKnow:false
});
var xx = new UIAlertView();
console.log(xx);
}
</script>
Copier après la connexion
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!
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
