Voyons d’abord à quoi ressemble le modèle iPhone X
Dans l'image ci-dessus, le modèle Iphonex possède ces deux nouvelles zones en tête et en bas, nous devons donc faire quelques adaptations pour ce type de modèle afin de faciliter l'affichage de notre webapp.
Pour les pages mobiles constituées de h5, la disposition courante est le mode tête + torse + bas à trois colonnes. La tête et le haut sont positionnés de manière fixe et le contenu du torse peut défiler. La disposition provisoire est la suivante :
<div class=page> <header></header> <main></main> <footer></footer> </div>
Cependant, si vous n'utilisez pas les nouveaux attributs CSS de l'Iphone Dans cette situation, la barre de navigation en bas est bloquée par la lumière respiratoire fournie avec l'Iphone. J'ai vérifié plusieurs solutions
J'utilise le framework vue. Dans la page index.html, nous devons ajouter.
<meta name=viewport content=width=device-width,viewport-fit=cover>
Ensuite, sur la page publique app.vue, l'affichage de chacun de nos composants est remplacé par router-view ici, donc la barre d'en-tête publique peut être traitée ici. La disposition spécifique est la suivante :
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></modèle>Dans la mise en page ci-dessus, nous écrivons ce qui suit pour le div avec la classe placeholder_top :
.placeholder_top { position : fixe ; haut : 0 ; gauche : 0 ; largeur : 10rem ; couleur d'arrière-plan : #303030 ; hauteur : constante (zone de sécurité-inset-top) ; ); indice z : 999 ;}Dans ce cas, nous n'aurons plus à traiter le problème de la barre supérieure pour les composants séparés à l'avenir, nous pourrons ensuite résoudre le problème des en-têtes mentionné précédemment. Généralement, la plupart des en-têtes seront encapsulés dans des composants publics, donc dans. Ici, en raison de l'influence de l'élément que nous avons inséré sur la page app.vue, la méthode d'écriture CSS de notre head doit également être légèrement modifiée. La mise en page du composant head est la suivante :
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> Contenu de navigation</div> <div class=placeholder></div> </header></ modèle>Le CSS de la page est :
header{background-color : #303030 ; .title{ position : fixe ; top : constant (safe-area-inset-top ); hauteur : 88px ; indice z : 999 ; } .placeholder{ hauteur : 88px ; largeur : 10rem }}Écrit de cette manière, la barre de navigation principale sera située sous la barre d'état du téléphone mobile, n'affectera pas la fenêtre et est compatible avec les modèles Android et iOS (ces problèmes de compatibilité impliquent également des problèmes du système iOS, mais cet article pas encore impliqué)
Examinons maintenant le traitement de la zone principale. Le composant d'en-tête ci-dessus ayant été traité, la disposition principale est la suivante :
main {padding-top : constant (safe-area-inset-top);padding-top : env (safe-area-inset-top);padding-bottom : calc (88px + constante (safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps : Laissez-moi vous expliquer ici. Les deux lignes suivantes sont utilisées lorsque la page actuelle n'a pas de barre de navigation inférieure.
padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);},
La mise en page principale est prête, il suffit d'écrire directement le contenu.
Ensuite, regardez la disposition du pied de page en bas
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Contenu inférieur</div></footer></template>Le CSS du contenu du bas est le suivant :
pied de page{ position : fixe ; bas : 0 ; gauche : 0 ; largeur : 10rem ; hauteur : calc(88px + constante(safe-area-inset-bottom)); bas)); couleur d'arrière-plan : #303030 ; .foot{ position : haut : 0 ; largeur : 10rem ; 88px ;}}Écrit de cette façon, le contenu du pied de navigation inférieur ne sera pas bloqué par la lumière respiratoire fournie avec le téléphone.
Nous pouvons donc résumer que la méthode d’écriture CSS que nous pourrions avoir besoin d’utiliser dans ce type d’adaptation d’application Web est la suivante :
position : fixe ; haut : constant (zone de sécurité-encart-haut); haut : env (zone de sécurité-encart-haut); bas : constant (zone de sécurité-encart-bas ); -inset-bottom); top : calc(1rem + constant(safe-area-inset-top)); top : calc(1rem + env(safe-area-inset-top)); calc(1rem + constant(safe-area-inset-bottom)); bottom : calc(1rem + env(safe-area-inset-bottom));
ps : Dans l'écriture ci-dessus, il est écrit : style={position:fixposition?'absolute':'fixed'} Ceci vise à résoudre le problème du positionnement inexact de ces éléments fixes lorsque l'utilisateur clique sur la zone de saisie et sur le. un clavier logiciel apparaît. Si vous êtes intéressé, vous pouvez l'étudier. Cet article n'en discutera pas pour l'instant.
Différentes méthodes d'écriture peuvent être utilisées ici en fonction des besoins réels. Il est recommandé de ne pas trop s'écarter de la logique de mise en page générale pour un traitement unifié et une maintenance pratique. De plus, s'il y a de réels problèmes de test de machine et de style. causés par la compatibilité de la mise en page, le débogage de la machine réelle peut être utilisé. La méthode consiste à utiliser le navigateur du PC pour déboguer l'application Web et examiner les éléments. Cela peut essentiellement résoudre la plupart des problèmes de style concernant le débogage de la machine réelle, j'écrirai à ce sujet. la prochaine fois.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.