Maison > interface Web > Tutoriel H5 > le corps du texte

Concernant le problème d'adaptation de l'iphoneX à la page client H5

不言
Libérer: 2018-06-12 17:14:02
original
2024 Les gens l'ont consulté

Cet article vous présente principalement les informations pertinentes sur la page H5 du client d'adaptation iPhoneX. L'introduction dans l'article est très détaillée et a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent apprendre ensemble ci-dessous.

Avant-propos

Actuellement, de nombreux concepteurs d'applications ont commencé à se tourner vers le développement frontal H5, mais pour résoudre le problème de tous les iPhone et Modèles Android La question de l'adaptation 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 la barre supérieure de l'iPhone

Les clients précédents ont toujours utilisé la méthode de 20pt pour la barre d'état + 44pt pour la barre de navigation. Depuis l'iphone

2. Barre de fonctionnement 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

Comme mentionné ci-dessus, la méthode d'adaptation que nous pouvons utiliser en fonction des paramètres uniques actuels du téléphone mobile de l'iphoneX est :

(1) balise méta

Afin de s'adapter à l'iphone >

(2) Requête multimédia

<meta name="viewport" content="width=device-width,viewport-fit=cover">
Copier après la connexion
1 Utiliser la fonction constante

Uniquement lorsque viewport-fit=cover est défini, la fonction constante peut être utilisée

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

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}
Copier après la connexion

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

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    #buy {
        padding-bottom:34px; 
    }
}
Copier après la connexion

(4) Protocole client

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

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 dans le code ci-dessus sont expliqués comme suit :

safe-area-inset-bottom — une nouvelle fonctionnalité d'ios11, utilisez Définir la distance entre la zone de sécurité et la frontière
  • 375 — La largeur de l'appareil iphoneX
  • 812 — La hauteur de l'appareil iphoneX
  • 3 — 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 utilise le rem. méthode de mise à l'échelle, alors 1pt = 1px * 3 ( iphone
Recommandations associées :

Utilisez Android pour imiter WeChat pour charger la barre de progression de la page H5

Utilisez CSS pour implémenter une imitation des commutateurs ios7


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal