Récemment, j'écrivais une page h5 intégrée dans la vue Web du mini programme, qui est fonction des commentaires de l'article. Au cours du processus, j'ai rencontré de nombreux problèmes de compatibilité et les performances sur différents modèles étaient également très incohérentes, j'ai donc résumé les problèmes suivants. : Enregistrez-le pour pouvoir le consulter plus tard
1. Problème de datesPour aaaa-mm-jj hh:mm:ss, ce format n'est pas reconnu par le système ios
Lorsque l'heure est formatée, elle est bien traitée côté navigateur, mais sur le téléphone mobile, elle devient NAN, ou null. Dans ce cas, le système iOS ne peut pas convertir ce type d'heure.
let date = new Date('2019-02-28 18:33:24'); // null`La solution est de le convertir au format aaaa/mm/jj hh:mm:ss.
remplacer(//-/g, /)2. Le clavier est rangé et la page reste bloquée et ne revient pas.
Sur iOS12, j'ai constaté que lorsque le clavier est rétracté, la page reste bloquée, laissant le bas vide. Si vous déplacez légèrement la page, elle sera restaurée.
Pour ce genre de problème, j'ai vérifié de nombreuses solutions sur Internet. La solution consiste en gros à faire défiler la page lors de l'événement de flou.
window.scrollTo(0, défilement);
Mais il y a un problème très sérieux : s'il y a des boutons sur la page qui doivent être actionnés, par exemple une zone de saisie de commentaire + un bouton de publication, après avoir saisi le texte, cliquez sur publier, et lorsque l'événement de clic est déclenché, la page déclenchera d'abord l'événement de flou, et le clavier retombera ensuite. . . . Le clic sur le bouton ne fait rien.
Solution : Changer l'événement click en ontouchstart peut résoudre ce problème. L'événement ontouchstart est meilleur que le déclenchement d'un événement click
3. Dans la vue Web de l'applet WeChat dans iOS12, le clavier est rétracté et le bas de la page sera vide.Ce problème est probablement dû au fait que le paramètre de défilement de la page est automatique.
4. Le correctif iPhone échoue, provoquant le déplacement du curseur de la zone de texte sur certaines machines.Solution : Tous les éléments frères deviennent absolus et l'élément parent overflow:auto;
Élément parent : hauteur : 100vh ; position : relatif ; débordement-x : débordement-y : auto ; remplissage en bas : 10 px ; z-index : 15. Le clavier bloque la zone de saisie
Si la zone de saisie est fixée en bas à l'aide de fixe, lorsque le clavier est relevé, la zone de saisie échouera sur l'iPhone, provoquant le défilement de la page. La zone de saisie défilera avec la page et, sur certains modèles, la zone de saisie le fera. être parfois bloqué par le clavier. Problèmes occasionnels, très hostiles.
Solution : abandonnez la mise en page fixe. Si la page comporte un défilement, abandonnez l'absolu. Si vous êtes obligé d'utiliser l'absolu, veuillez vous référer à l'article précédent sur le décalage du curseur.
Il est recommandé d'utiliser une mise en page flexible et la compatibilité sera résolue.
Bien sûr, si vous rencontrez les problèmes ci-dessus, cela signifie que la conception du produit est très déraisonnable. Si nécessaire, vous devez toujours modifier la conception pour une conception où l'entrée n'a pas besoin d'être poussée vers le haut par le clavier. ne sont pas parfaits. Résolvez les problèmes de tous les modèles.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.