Dans l'entreprise, j'ai participé à un projet de développement mixte d'APP natif et h5. J'étais responsable de la partie h5 du projet. Je résumerai les problèmes rencontrés dans le projet comme suit :
questions spécifiques Question 1 : problème de barre de défilement de pageDescription du problème
La page Web comporte des barres de défilement lors de la navigation sur un navigateur PC ; cependant, lorsqu'elle est ouverte sur un navigateur mobile, il n'y a pas de barre de défilement.
Solution
Définir la couche la plus externe de la page (lorsque j'écris une page, j'écris généralement un grand conteneur dans la balise body pour stocker le contenu de la page) ; set overflow:auto/scroll; hauteur:100% Pas question non plus)
exemple
<body> <div style=overflow:scroll/auto;> //Contenu de la page Web</div></body>Question 2 : Utilisation des événements touchstart et touchend
Description du problème
Lorsque le fichier touch.js est introduit et que les événements touchstart et touchend sont utilisés pour obtenir des effets interactifs, le problème de l'échec du déclenchement d'événements se produit sur certains téléphones mobiles [par exemple : téléphones mobiles Honor de version basse]
Solution
Méthode 1 : utiliser RemoveEventListener et addEventListener ensemble
Méthode 2 : ajoutez e.preventDefault(); pour empêcher certains téléphones mobiles de sauter par défaut
Méthode 3 : Jquery sur implémente la liaison d'événement
Remarque : les méthodes 1 et 2 sont toutes deux natives du JS utilisant addEventListener pour implémenter l'écoute d'événements ; et lorsque l'élément dom utilise les événements touchstart et touchend, il doit être utilisé conjointement avec la liaison d'événements ou l'écoute d'événements, sinon la partie js lancera un exception.
code
//Méthode 1 : document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',callback, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//Méthode 2 : document.getElementById('list5').addEventListener('touchstart',function(e){ e. prévenirDefault();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Question 3 : Problème de crash en appuyant longuementRestauration de scénario
Il existe une page de liste XXX Lorsque vous appuyez longuement sur un élément de la liste (en touchant du texte), un crash se produit sur les téléphones mobiles de version basse.
Solution
partie js : ajoutez e.preventDefault(); lorsque l'événement est déclenché pour empêcher le comportement par défaut
partie CSS : ajouter du code qui interdit la copie de texte
code
//partie js : e.preventDefault(); //partie css : -webkit-touch-callout : none ; //Solution au crash //Désactiver la copie -moz-user-select : none;-khtml-user-select : aucun ; sélection par l'utilisateur : aucun ;Question 4 : Problème avec 1px sur terminal mobile
Description du problème
Étant donné que différents téléphones ont des densités de pixels différentes, 1px en CSS n'est pas équivalent à 1px sur les appareils mobiles. Dans le projet, js et rem sont utilisés pour l'adaptation de l'écran mobile, donc une situation de 0,5 px se produit, ce qui fait que la version inférieure du téléphone mobile ne peut pas afficher la bordure de 0,5 px.
Solution
Utilisez CSS pour résoudre le problème 1px et écrivez directement : border-width:1px; à l'élément dom qui doit être défini sur 1px ;
code
//Partie HTML : <div class='class1'></div>//partie css : .class1{ border : 1px solid #ccc;}//partie css/*Problème d'affichage normal de 1px au démarrage du terminal mobile */% border-1px{ display: block; position:absolute left: 0; content: ' ';}.border-1px{ position: relative &::after{ @extend; %border-1px; bottom : 0 ; border-top : 1px solid #ccc; } &::before{ @extend %border-1px ; webkit-min-device-pixel-ratio:1,5),(min-device-pixel-ratio:1,5){ .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio :2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5 }); }}/*Le problème de l'affichage normal de 1px sur le terminal mobile*/ Problème 5 : js ne peut pas analyser correctement la valeur du paramètre de l'URL contenant le signe =Description du problème
Dans le projet, étant donné que la valeur du paramètre de la demande de données est obtenue à partir de l'adresse URL et que la valeur du paramètre contient le signe =, la valeur du paramètre ne peut pas être correctement analysée (ps:js utilise le signe = pour séparer les paramètres de l'URL )
Solution
Transcodez l'URL puis décodez-la [Dans ce projet, l'application fournit l'adresse URL transcodée et le front-end utilise le plug-in geturlparams pour obtenir la valeur du paramètre de l'adresse URL]
code
//Decode = nombre dom.token = decodeURI($.query.get(token)); //Plug-in //Récupère la valeur sans décoder dom.msgid = $.query.get(msgid);Question 6 : L'écoute d'événements natifs js et la liaison d'événements jquery ne sont pas valides dans iOS
Description du problème
Lors de l'utilisation de l'écoute d'événement ou de la liaison d'événement, le déclenchement d'événement dans iOS n'est pas valide car l'élément parent sélectionne l'élément body ou document.
Solution
N'utilisez pas d'éléments body et document comme éléments parents
Question 7 : La date est affichée sous la forme NaN dans iOSDescription du problème
Le format de date de Date présente des problèmes de compatibilité dans iOS. La date dans iOS sera affichée comme : NaN.
Solution
Solution : 2017/12/26 19:36:00 est pris en charge dans iOS, mais le format 2017-12-26 19:36:00 n'est pas pris en charge. Ce dernier format affiche Nan dans iOS (il peut être affiché normalement sous Android) .
code
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Convertir le '-' du format d'heure au format '/', compatible avec iOSQuestion 8 : Il y a un problème avec l'événement de clic dans iOS
Description du problème
Lorsque l'événement de clic est déclenché par un clic iOS, le module d'élément parent de la délégation d'événement sera sélectionné [c'est-à-dire : en raison du bouillonnement de l'événement et le parent a un style par défaut], et il y aura un calque transparent, par exemple
<ul> <li>Élément de liste 1</li> <li>Élément de liste 2</li> <li>Élément de liste 3</li></ul>
Analyse : Par exemple, lorsqu'un utilisateur iOS clique sur l'élément de liste 1, l'UL de la couche parent aura un style transparent.
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.