Problèmes de cross-browsing que j'ai rencontrés (principalement Safari)

À propos des deux problèmes de cross-browsing les plus frustrants rencontrés lors du développement Web mobile, et d'autres problèmes à prendre en compte

Je souhaite 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 propre 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 le viewport change et n'est pas fixe à cause de ces éléments.

Par exemple, si la hauteur est définie à 100vh, la mise en page est correctement affichée en l'absence de barre de navigation, mais si la barre de navigation apparaît, elle masque l'interface utilisateur.

Pour résoudre ce problème,

1. Utiliser dvh.

dvh est un viewport dynamique qui reflète automatiquement les changements chaque fois que la hauteur du viewport change. Il est donc possible de gérer les changements de mise en page de l'interface utilisateur en fonction de la présence ou non de la barre d'adresse ou de la barre de navigation inférieure.

2. On peut aussi envisager svh.

svh est la hauteur de la zone d'interface utilisateur, sans la barre d'adresse ni la barre de navigation. Dans les situations où l'apparition de la barre d'adresse ou de navigation est prévue, 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 (focus) d'une entrée

Sur Safari mobile, lorsque j'ai sélectionné une entrée, l'interface utilisateur existante a été décalée à cause du clavier virtuel. Sur les autres navigateurs, le clavier virtuel apparaît généralement de manière absolue, mais sur le Web mobile Safari, il occupe de l'espace comme s'il avait appliqué display block.

Sur Safari, le problème survient lorsque la hauteur du viewport est ajustée dynamiquement lors de l'apparition du clavier virtuel, ce qui entraîne le réajustement des éléments utilisant des unités vh. Pour résoudre ce problème,

1. Utiliser min-height.

Fixer la hauteur pour empêcher le décalage de l'interface utilisateur.

2. Appliquer les préfixes de fournisseur (décrit ci-dessous).

Insérer l'attribut applicable à certains navigateurs tels que Safari.

3. Contrôler dynamiquement le viewport avec JavaScript.

* Cette méthode n'est pas recommandée. Le déplacement soudain de la hauteur de défilement fait clignoter la mise en page.

Un événement resize est utilisé pour détecter les changements de viewport et appliquer le style approprié.

3-1. Contrôler la position lors de l'événement focusin.

3-2. Contrôler la position lorsque le clavier virtuel apparaît (application de la classe dans l'exemple ci-dessous).

Il est préférable de résoudre le problème entièrement avec du CSS, mais si les exemples ci-dessus ne fonctionnent pas, vérifiez s'il s'agit d'un élément positionné : absolute ou fixed, et essayez de supprimer les attributs top, right, left, bottom tout en modifiant le CSS.

Autres

J'ai également recherché plusieurs points à prendre en compte lors du développement Web mobile sur Safari.

1. Utiliser des préfixes de fournisseur pour certains attributs.

* Les préfixes de fournisseur sont des préfixes qui permettent au navigateur de comprendre et de restituer un attribut CSS spécifique, et permettent d'appliquer le CSS comme prévu, même si les navigateurs l'implémentent différemment. Cela permet une cohérence entre les navigateurs et une compatibilité avec les anciennes versions des navigateurs.

Types

-webkit-: Chrome, Safari, etc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer et Edge
-o-: Opera

Les attributs pour lesquels des préfixes de fournisseur sont généralement nécessaires sont les suivants :

De plus, Safari limite la capacité de LocalStorage et SessionStorage à environ 5 Mo, et ne partage pas l'espace de stockage entre les onglets, il est donc nécessaire d'y faire attention.