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">
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.
Utilisez Android pour imiter WeChat pour charger la barre de progression de la page H5
Utilisez CSS pour implémenter une imitation des commutateurs ios7Ce 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!