Comment adapter le CSS au plein écran de l'iPhone

1. Méthode de requête multimédia

/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

Problèmes existants : Dans WeChat webveiw, cette solution peut ajouter la largeur de la zone de sécurité au bas de l'élément, pas de problème. Cependant, les navigateurs dotés de barres inférieures tels que Safari (la zone d'affichage de la page se trouve déjà à l'intérieur de la zone de sécurité) ajouteront également la largeur de la zone de sécurité.

(Tutoriel vidéo : Tutoriel vidéo CSS)

2. Fonctions CSS

Fonctions CSS fournies par Apple après le lancement du plein écran, ios<11.2 est constant(), ios>11.2 est env(). Vous pouvez remplir les champs Safe-area-inset-top, Safe-area-inset-left, Safe-area-inset-right et Safe-area-inset-bottom correspondant aux largeurs de zone de sécurité haut, bas, gauche et droite. . env et constant ne prennent effet que lorsque viewport-fit=cover.

Le code est le suivant :

balise méta ajoutée viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

méthode d'écriture CSS, les navigateurs qui ne supportent pas env et constant ignoreront ce style

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

Tutoriel recommandé : Tutoriel de base pour démarrer avec CSS

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!