Im Unternehmen habe ich an einem gemischten Entwicklungsprojekt aus nativer APP und h5 teilgenommen. Ich war für den h5-Teil des Projekts verantwortlich. Ich werde die im Projekt aufgetretenen Probleme wie folgt zusammenfassen:
konkrete Fragen Frage 1: Problem mit der Bildlaufleiste der SeiteProblembeschreibung
Beim Surfen in einem PC-Browser verfügt die Webseite über Bildlaufleisten. Wenn sie jedoch in einem mobilen Browser geöffnet wird, gibt es keine Bildlaufleiste.
Lösung
Legen Sie die äußerste Ebene der Seite fest (wenn ich eine Seite schreibe, schreibe ich normalerweise einen großen Container in das Body-Tag, um den Inhalt der Seite zu speichern, und kann den Wert des Höhenattributs nicht festlegen). Höhe: 100 % Auch auf keinen Fall)
Beispiel
<body> <div style=overflow:scroll/auto;> //Webseiteninhalt</div></body>Frage 2: Verwendung von Touchstart- und Touchend-Ereignissen
Problembeschreibung
Wenn die Datei touch.js eingeführt wird und die Ereignisse touchstart und touchend verwendet werden, um interaktive Effekte zu erzielen, tritt bei einigen Mobiltelefonen das Problem auf, dass das Auslösen von Ereignissen fehlschlägt [zum Beispiel: Honor-Mobiltelefone mit niedriger Version].
Lösung
Methode 1: Verwenden Sie „removeEventListener“ und „addEventListener“ zusammen
Methode 2: Fügen Sie e.preventDefault(); hinzu, um zu verhindern, dass einige Mobiltelefone standardmäßig springen
Methode 3: Jquery implementiert die Ereignisbindung
Hinweis: Methode 1 und Methode 2 sind beide native JS, die addEventListener zum Implementieren der Ereignisüberwachung verwenden. Wenn das dom-Element Touchstart- und Touchend-Ereignisse verwendet, muss es in Verbindung mit der Ereignisbindung oder der Ereignisüberwachung verwendet werden, andernfalls löst der JS-Teil eine aus Ausnahme.
Code
//Methode 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);//Methode 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. verhindernDefault();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Frage 3: Absturzproblem bei langem DrückenWiederherstellung des Szenarios
Es gibt eine XXX-Listenseite, wenn Sie auf der Listenseite lange auf ein Listenelement drücken (Text berühren), kommt es auf Mobiltelefonen mit niedrigerer Version zu einem Absturz.
Lösung
js-Teil: e.preventDefault(); hinzufügen, wenn das Ereignis ausgelöst wird, um das Standardverhalten zu verhindern
CSS-Teil: Code hinzufügen, der das Kopieren von Text verhindert
Code
//js-Teil: e.preventDefault(); //css-Teil: -webkit-touch-callout: none; //Lösung zum Absturz //Kopieren deaktivieren -moz-user-select: none;-khtml-user-select: keine;Benutzerauswahl: keine;Frage 4: Problem mit 1px auf dem mobilen Endgerät
Problembeschreibung
Da verschiedene Telefone unterschiedliche Pixeldichten haben, entspricht 1 Pixel in CSS nicht 1 Pixel auf Mobilgeräten. Im Projekt werden js und rem für die Anpassung des mobilen Bildschirms verwendet, sodass eine 0,5-Pixel-Situation auftritt, was dazu führt, dass die niedrigere Version des Mobiltelefons den 0,5-Pixel-Rand nicht anzeigen kann.
Lösung
Verwenden Sie CSS, um das 1px-Problem zu lösen, und schreiben Sie direkt: border-width:1px; in das dom-Element, das auf 1px gesetzt werden muss;
Code
//HTML-Teil: <div class='class1'></div>//css-Teil: .class1{ border: 1px solid #ccc;}//css-Teil/*Problem mit normaler Anzeige von 1px auf dem mobilen Endgerät starten */% border-1px{ display: block; position:absolute; left: 0; width: 100%; %border-1px; unten: 0; border-top: 1px solid #ccc } &::before{ @extend %border-1px; top: 1px solid #ccc; 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); :2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5 } }}/*Das Problem der normalen Anzeige von 1px auf dem mobilen Endgerätend*/ Problem 5: js kann den Parameterwert der URL, die = sign enthält, nicht korrekt analysierenProblembeschreibung
Da im Projekt der Parameterwert der Datenanforderung von der URL-Adresse abgerufen wird und der Parameterwert das =-Zeichen enthält, kann der Parameterwert nicht korrekt analysiert werden (ps:js verwendet das =-Zeichen, um die Parameter der URL zu trennen). )
Lösung
Transkodieren Sie die URL und dekodieren Sie sie dann [In diesem Projekt stellt die APP die transkodierte URL-Adresse bereit und das Front-End verwendet das geturlparams-Plug-in, um den Parameterwert der URL-Adresse abzurufen]
Code
//Decode = Zahl dom.token = decodeURI($.query.get(token)); //Plug-in //Wert ohne Decodierung abrufen dom.msgid = $.query.get(msgid);Frage 6: Native JS-Ereignisüberwachung und JQuery-Ereignisbindung sind in iOS ungültig
Problembeschreibung
Bei Verwendung von Ereignisüberwachung oder Ereignisbindung ist die Ereignisauslösung in iOS ungültig, da das übergeordnete Element das Text- oder Dokumentelement auswählt.
Lösung
Verwenden Sie keine Body- und Dokumentelemente als übergeordnete Elemente
Frage 7: Das Datum wird in iOS als NaN angezeigtProblembeschreibung
Das Datumsformat von Date weist Kompatibilitätsprobleme in iOS auf. Das Datum in iOS wird als NaN angezeigt
Lösung
Lösung: 26.12.2017 19:36:00 wird in iOS unterstützt, aber das Format 26.12.2017 19:36:00 wird nicht unterstützt. Das letztere Format zeigt Nan in iOS an (es kann normal in Android angezeigt werden).
Code
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Konvertieren Sie das „-“ im Zeitformat in das mit iOS kompatible Format „/“.Frage 8: Es gibt ein Problem mit dem Klickereignis in iOS
Problembeschreibung
Wenn das Klickereignis durch einen iOS-Klick ausgelöst wird, wird das übergeordnete Elementmodul der Ereignisdelegation ausgewählt [d. h. aufgrund der Ereignisblase und das übergeordnete Element hat einen Standardstil], und es wird beispielsweise eine transparente Ebene angezeigt
<ul> <li>Listenelement 1</li> <li>Listenelement 2</li> <li>Listenelement 3</li></ul>
Analyse: Wenn beispielsweise ein iOS-Benutzer auf Listenelement 1 klickt, weist die UL der übergeordneten Ebene einen transparenten Stil auf.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.