La clé de l'adaptation iPhoneX est de savoir comment adapter la page aux encoches, à la zone de commande inférieure et aux grands coins arrondis.
Par rapport aux autres téléphones mobiles, la différence entre IphoneX est que bien que l'appareil dispose également d'un écran, il est en fait divisé en plusieurs modules. Voir la figure ci-dessous pour plus de détails :
Lorsque nous déplaçons une page Web normale vers X, l'effet est que le contenu est affiché uniquement dans la zone sécurisée et qu'il n'y a aucun contenu Web dans la zone non sécurisée. Cela signifie que des blocs blancs apparaîtront en tête et en bas. pour y faire face ?
Solution 1. Ajoutez une couleur d'arrière-plan au corpsPourquoi ajouter une couleur d'arrière-plan ? A quoi ça sert ? Notez qu'il y aura des taches blanches sur la tête et les fesses que nous venons de mentionner. En fait, il n'est pas exact de dire qu'elles sont blanches, car cette couleur provient en réalité de la couleur de fond du corps. De plus, lorsque nous extrayons ou déroulons le contenu, le contenu et la couleur en bas de la page Web seront affichés, qui est en fait la couleur d'arrière-plan du corps. Donc si vous souhaitez modifier ces deux effets, vous pouvez définir la couleur de fond du corps.
2. Ajoutez la balise <meta> de viewport-fit = coverCette étape est extrêmement critique. Voyons d’abord les résultats :
Copier le code