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

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">

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)); //根据实际情况选择适配方法
    }
}

(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; 
    }
}

(4) Protocole client

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

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!