Afin de résoudre les problèmes de cross-browsing rencontrés sur le navigateur Safari lors du développement web mobile, des solutions ont été proposées pour les problèmes de calcul de la hauteur de la viewport et de décalage de l'interface utilisateur dus au clavier virtuel.
Le problème de la hauteur de la viewport peut être résolu en utilisant dvh ou svh, le problème du clavier virtuel peut être résolu en utilisant min-height, en appliquant des préfixes de vendeur, et en utilisant JavaScript pour un contrôle dynamique.
Lors du développement web mobile pour Safari, il faut tenir compte de l'utilisation des préfixes de vendeur, des limitations de capacité de LocalStorage et SessionStorage (environ 5 Mo) et de l'impossibilité de partager le stockage entre les onglets.
J'ai écrit un article avec beaucoup d'efforts, puis j'ai cliqué sur "Enregistrer", mais j'ai eu une erreur 404 et tout a disparu ㅠㅠ
Je souhaite documenter deux problèmes de cross-browsing fastidieux rencontrés lors du développement d'un site web mobile, ainsi que d'autres problèmes à prendre en compte.
Je vais les consigner ici.
Problème de calcul de la hauteur du viewport dû à la barre d'adresse et à la barre de navigation du navigateur
Safari et Samsung Internet possèdent une barre de navigation inférieure intégrée au navigateur. Sauf si show/hide est spécifiquement configuré, elle apparaît lors du défilement vers le bas et disparaît lors du défilement vers le haut.
Le problème est que cela entraîne une modification du viewport, qui n'est donc pas fixe.
Par exemple, si la hauteur est définie à 100vh, la mise en page est correctement affichée en l'absence de barre de navigation. Cependant, lorsque la barre de navigation apparaît, elle masque l'interface utilisateur.
Pour résoudre ce problème,
1. Utilisez dvh.
dvh est un viewport dynamique qui reflète automatiquement les modifications de la hauteur du viewport. Il est donc possible de gérer les changements de disposition de l'interface utilisateur en fonction de la présence ou de l'absence de la barre d'adresse ou de la barre de navigation inférieure.
2. Vous pouvez également envisager svh.
svh représente la hauteur de la zone d'interface utilisateur, à l'exclusion de la barre d'adresse et de la barre de navigation. Dans les situations où la barre d'adresse ou la barre de navigation devraient apparaître, l'utilisation de svh est plus précise.
Problème de décalage de l'interface utilisateur dû au clavier virtuel lors de la sélection d'une entrée
Sur Safari mobile, lorsque j'ai sélectionné une entrée, l'interface utilisateur existante a été décalée par le clavier virtuel. Sur les autres navigateurs, le clavier virtuel apparaît généralement de manière absolue, mais sur le navigateur web mobile Safari, il occupe de l'espace comme s'il avait appliqué display: block.
Sur Safari, le problème est dû à l'ajustement dynamique de la hauteur du viewport lorsque le clavier virtuel apparaît, ce qui entraîne un réajustement des éléments utilisant l'unité vh. Pour résoudre ce problème,
1. Utilisez min-height.
Fixez la hauteur pour empêcher le décalage de l'interface utilisateur.
html, body{height:100%;min-height:100vh;/* Définition d'une hauteur minimale fixe */overflow: hidden;}
2. Appliquez des préfixes de fournisseur (détails ci-dessous).
html, body{height: -webkit-fill-available;/* Compatible avec Safari */}
Insérez des attributs spécifiques à certains navigateurs comme Safari.
3. Contrôlez dynamiquement le viewport avec JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Code à exécuter lorsque le clavier apparaîtdocument.body.classList.add('keyboard-visible');}else{// Code à exécuter lorsque le clavier disparaîtdocument.body.classList.remove('keyboard-visible');}});
Écoutez l'événement resize pour détecter les changements de viewport et appliquez le style approprié.
3-1. Contrôlez la position lors du déclenchement de l'événement focusin.
3-2. Contrôlez la position lorsque le clavier virtuel apparaît (application de classe dans l'exemple ci-dessous).
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Clavier virtuel affichédocument.body.classList.add('keyboard-visible');}else{// Clavier virtuel masquédocument.body.classList.remove('keyboard-visible');}});
Dans mon cas, j'ai résolu le problème en utilisant la méthode 3-1. Si la méthode 3-1 ne fonctionne pas comme prévu, vérifiez d'abord si le code ci-dessous fonctionne comme prévu.
J'ai également recherché quelques points à considérer lors du développement de sites web mobiles pour Safari.
1. Utilisez des préfixes de fournisseur pour certains attributs.
* Les préfixes de fournisseur sont des préfixes qui permettent aux navigateurs de comprendre et de restituer certains attributs CSS. Ils permettent d'appliquer correctement des CSS implémentés différemment selon les navigateurs, assurant ainsi la cohérence entre les navigateurs et la compatibilité avec les anciennes versions.
Types
-webkit-: Chrome, Safari, etc. -moz-: Mozilla Firefox -ms-: Internet Explorer et Edge -o-: Opera
Voici quelques attributs qui nécessitent des préfixes de fournisseur :
De plus, Safari limite la capacité de LocalStorage et de SessionStorage à environ 5 Mo et ne partage pas l'espace de stockage entre les onglets. Il est donc nécessaire d'y prêter attention.
ps. Je suis très triste que mon article précédent ait disparu. Même si l'article que j'ai publié n'est pas de haute qualité,,,ㅠ Je dois absolument utiliser la fonction d'enregistrement temporaire.