Tutoriel sur la façon d'adapter l'iphoneX à la page du client H5

À l'heure actuelle, de nombreux concepteurs d'applications ont commencé à se tourner vers le développement frontal du H5, mais résoudre le problème d'adaptation pour tous les modèles d'iPhone et d'Android est notre priorité absolue. Que vous conceviez une application ou que vous écriviez un H5 frontal, vous devez tenir compte de la compatibilité mobile.

Depuis l'iPhone

1. Barre supérieure

Le client précédent a toujours utilisé la méthode 20pt pour la barre d'état + 44pt pour la barre de navigation. Depuis l'iphone

2. Barre de commande inférieure

Depuis l'iPhone À ce stade, une zone de sécurité vide doit être laissée en bas et la dernière ligne inférieure du contenu de la page doit se trouver dans le coin du téléphone mobile. La hauteur de cette zone de sécurité est de 34 pts.

3. Méthode d'adaptation

En conclusion, sur la base des paramètres uniques actuels du téléphone mobile de l'iphoneX, la méthode d'adaptation que nous pouvons adopter est la suivante :

(1)balise méta

Afin de s'adapter à l'iPhone

 <meta name=viewport content=width=device-width,viewport-fit=cover>

(2) Demandes des médias

1. Utiliser la fonction constante

La fonction constante ne peut être utilisée que si viewport-fit=cover est défini

 @supports(bottom:constant(safe-area-inset-bottom)) { sélecteur{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(valeur supposée) + constante(safe-); Area-inset-bottom)); //Sélectionnez la méthode d'adaptation en fonction de la situation réelle}}

2. Utilisez les paramètres de modèle uniques d'iphoneX

 Écran @media uniquement et (largeur de l'appareil : 375 px) et (hauteur de l'appareil : 812 px) et (-webkit-device-pixel-ratio : 3) { #buy { padding-bottom:34px }} ;

(3) jugement js (Jquery est utilisé ci-dessous)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }};

(4) Protocole client

Vous pouvez également demander au client de demander s'il s'agit d'un iphoneX selon le protocole client pour maintenir la cohérence avec le client.

4. Explication des paramètres

Les paramètres du code ci-dessus sont expliqués comme suit :

• safe-area-inset-bottom — Une nouvelle fonctionnalité dans iOS11, utilisée pour définir la distance entre la zone de sécurité et la limite
• 375 — La largeur de l'appareil iphoneX
• 812 — La hauteur de l'appareil iphoneX
• 3 — La résolution de l'appareil iphoneX
• 724 — hauteur de l'appareil iphoneX (812) - hauteur de la barre supérieure (88)
• 34 — Hauteur de la zone de sécurité inférieure

Les paramètres ci-dessus sont calculés sur la base de la norme 1pt=1px Si la page H5 adopte la méthode de mise à l'échelle rem, alors 1pt = 1px * 3 (résolution iphoneX).

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que le contenu de cet article aura une certaine valeur de référence pour les études ou le travail de chacun. Si vous avez des questions, vous pouvez laisser un message de communication. Merci pour votre soutien à VeVb Wulin. Réseau.