Der Fallstrickrekord des Gummi-Rebound-Effekts der iOS WeChat H5-Seite

Geschäftliche Anforderungen

Eines der Projekte, die ich kürzlich entwickelt habe, ist eine H5-Seite zu offiziellen WeChat-Konten. Die Seitenanzeige ist auf Android WeChat normal, aber auf iOS WeChat gibt es einige unerwartete Fehler. Dieses Mal zeichnen wir hauptsächlich das Rubber-Rebound-Problem (Gummibandeffekt) von mobilen H5-Seiten unter iOS auf, in der Hoffnung, Schülern zu helfen, die auf ähnliche Probleme stoßen.

🐕Lösung 1: Verwenden Sie inobounce.js

inobounce.js GitHub-Adresse

Führen Sie inbounce.js im Header-Tag der HTML-Hauptseite ein. Nach der Einführung dieser Datei kann die gesamte Seite unter iOS nicht verschoben oder gescrollt werden. Wenn Sie möchten, dass das Scroll-Element den Scroll-Effekt erzielt, müssen Sie eine feste Höhe für den Scroll-Bereich festlegen, d. h. Höhe, maximale Höhe, und außerdem Überlauf: Auto festlegen, um das Seiten-Sliding zu erreichen. Um zu verhindern, dass das Scrollen der Seite unter iOS einfriert, müssen Sie die Eigenschaft -webkit-overflow-scrolling: touch für den Scrollbereich festlegen.

<!DOCTYPE html>
<html lang="de">
	<Kopf>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
		<Titel>Nicht-Bounce</Titel>
		<script src="inobounce.js"></script>
		<Stil>
			ul {
				Höhe: 115px;
				Rand: 1px durchgehend grau;
				Überlauf: automatisch;
				-webkit-overflow-scrolling: berühren;
			}
		</Stil>
	</Kopf>
	<Text>
		<ul>
			<li>Listenelement 1</li>
			<li>Listenelement 2</li>
			<li>Listenelement 3</li>
			<li>Listenelement 4</li>
			<li>Listenelement 5</li>
			<li>Listenelement 6</li>
			<li>Listenelement 7</li>
			<li>Listenelement 8</li>
			<li>Listenelement 9</li>
			<li>Listenelement 10</li>
		</ul>
	</body>
</html>

🐒 Lösung 2: CSS-Stilverarbeitung (empfohlen)

Als ich zufällig die H5-Aktivitätsseiten einiger öffentlicher Konten auf der iOS-Seite öffnete, gab es keinen sogenannten Gummi-Rebound-Effekt. Daher fragte ich mich, ob dieser Effekt verwendet werden könnte, um den von den iOS-Webseiten erzeugten Gummi-Rebound-Effekt zu lösen. Schließlich kann diese Methode verwendet werden, um die Seite unter iOS zu fixieren, ohne dass der Rubber-Rebound-Effekt entsteht. Der Rubberband-Effekt wurde auf Geräten mit der Systemversion iOS13+ behoben. Auf Geräten mit der Systemversion iOS12+ wurde er nicht ausprobiert. Wir planen, für weitere Tests ein Apple-Telefon mit iOS12+ zu finden und dann die Testergebnisse zu ergänzen.

<!DOCTYPE html>
<html lang="de">
	<Kopf>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
		<Titel>iOS Eraser Rebound</Titel>
	</Kopf>
	<Text>
		<!-- Inhaltsbereich -->
		<div id="app"></div>
	</body>
</html>

Haupt-CSS-Code:

/* Initialisierung */
* {
	Rand: 0;
	Polsterung: 0;
}
/* Grundlegender Stil */
html,
Körper {
	Breite: 100 %;
	Höhe: 100%;
	Überlauf: versteckt;
}
Körper {
	Box-Größe: Rahmenbox;
	Position: relativ;
}
/* aus dem Bereich scrollen */
#app {
	Breite: 100 %;
	Höhe: 100%;
	Überlauf-y: automatisch;
}

🐬Zusammenfassung:

Im Allgemeinen habe ich beide Lösungen in der tatsächlichen Entwicklung ausprobiert. Lösung 1 kann den Gummi-Rebound-Effekt beim Durchsuchen von H5-Webseiten in WeChat perfekt lösen. Wenn die H5-Seite zum Aufrufen im iOS WeChat autorisiert ist, wird unten eine Navigationsleiste angezeigt. Zu diesem Zeitpunkt kann die Navigationsleiste auch abgedeckt sein und das Klicken auf die Schaltflächen an beiden Enden der Navigationsleiste reagiert nicht. Beim Öffnen einer H5-Seite in Safari werden die Adressleiste oben und die Menüleiste unten auf der Webseite bis zu einem gewissen Grad blockiert, was das Erlebnis nicht gerade optimal macht. Letztendlich wurde diese Lösung verabschiedet. Lösung 2 ist das, was ich in meiner eigentlichen Arbeit verwende, und der Rebound-Effekt wurde bis zu einem gewissen Grad verbessert. Der Erlebniseffekt wurde im Vergleich zur Lösung 1 deutlich verbessert.

Wenn die Seite über eine WeChat-Autorisierung verfügt und der Seitenpfad springt, wird unten auf der von WeChat unter iOS geöffneten Webseite eine zusätzliche Navigationsleiste angezeigt. Ebenso wird es bei WeChat unter Android keine ähnliche Navigationsleiste geben. Wenn keine WeChat-Autorisierung und kein Seitensprung vorhanden sind, sind beide Lösungen optional. Wenn eine WeChat-Autorisierung vorhanden ist, wird empfohlen, Lösung 2 zu verwenden.

Dies ist das Ende dieses Artikels über den Eraser-Rebound-Effekt der iOS WeChat H5-Seite. Weitere relevante Inhalte zum Eraser-Rebound der iOS WeChat H5-Seite finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: So konfigurieren Sie die virtuelle Benutzeranmeldung in vsftpd

>>: So vereinheitlichen Sie den Zeichensatz einer vorhandenen MySQL-Datenbank

Implementierung des CSS-Ladeeffekts Pac-Man

Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.

Artikel

Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3

Der Fallstrickrekord des Gummi-Rebound-Effekts der iOS WeChat H5-Seite

Geschäftliche Anforderungen

🐕Lösung 1: Verwenden Sie inobounce.js

🐒 Lösung 2: CSS-Stilverarbeitung (empfohlen)

🐬Zusammenfassung:

Implementierung des CSS-Ladeeffekts Pac-Man

Beispiel für den Mehrpunkt-Routenplanungsprozess des WeChat-Applets Amap – detaillierte Erläuterung

Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten

MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden

Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.

Nutzungs- und Best-Practice-Handbuch für die Überwachung in Vue3

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

Ändern Sie die Dateiberechtigungen (Eigentum) unter Linux

Implementierung von LNMP für die separate Bereitstellung von Docker-Containern

Artikel empfehlen

Beispielanalyse der Verwendung gemeinsam genutzter und exklusiver Sperren in MySQL

Docker konfiguriert den Speicherort lokaler Images und Container

Betrachten des Threadmodells von Tomcat aus der Connector-Komponente – BIO-Modus (empfohlen)

HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste

Ähnlich wie HTML-Tags: strong und em, q, cite, blockquote

Lernprogramm zur Verwendung von HTML-Formular-Tags

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Detaillierte Erläuterung des mobilen Projekts vite2.0 + vue3

Benutzerdefinierter Vue-V-HAS-Befehl zum Implementieren der Schaltflächenberechtigungsbeurteilung

Beispielcode für CSS-Pseudoklassen zum Ändern des Eingabeauswahlstils

Lösung für das Problem, dass der Eintrag bei der Installation von mysql5.7.18 nicht gefunden werden kann

OpenSSL-Zertifikate in der Linux-Umgebung generieren

Detaillierte Erklärung des Unterschieds zwischen dem Standardwert des CSS-Attributs width: auto und width: 100%

Schritte zum Aufteilen und Komprimieren von CSS mit Webpack und zum Importieren mit Link

So installieren Sie Redis im Docker, legen das Kennwort fest und stellen eine Verbindung her