Der Fallstrickrekord des Gummi-Rebound-Effekts der iOS WeChat H5-Seite
Geschäftliche AnforderungenEines 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.jsinobounce.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
Artikel empfehlen
Linux-Plattform MySQL ermöglicht Remote-Login
Während des Entwicklungsprozesses stoße ich häufi...
Lösung für den Fehler bei der Verbindung mit MySQL in Docker
Szenario: Nach der Installation der neuesten Vers...
Beispiel einer DOM-Operationstabelle (DOM erstellt Tabelle)
1. Erstellen Sie eine Tabelle mit HTML-Tags: Code...
Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)
1. Wichtige Punkte für die frühzeitige Planung de...
Grafische Einführung in den Unterschied zwischen := und = in MySQL
Der Unterschied zwischen := und = = Nur beim Setz...
Nginx Reverse-Proxy-Konfiguration entfernt Präfix
Wenn Sie nginx als Reverse-Proxy verwenden, könne...
Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System
Ich bin heute auf ein seltsames Netzwerkproblem g...
Analyse des Verwendungsbeispiels für den Common Table Expression CTE in mysql8
Dieser Artikel beschreibt anhand eines Beispiels ...
Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung
Dieser Artikel beschreibt, wie mehrere Instanzen ...
Vollständiges HTML des Upload-Formulars mit Bildvorschau
Das Upload-Formular mit Bildvorschaufunktion, der...
Beherrschen Sie die häufig verwendeten HTML-Tags zum Zitieren von Inhalten auf Webseiten.
Verwenden Sie „blockquote“ für lange Zitate, „q“ ...
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
Detaillierte Erklärung der drei wichtigsten Frontend-Technologien React, Angular und Vue
Inhaltsverzeichnis 1. Reagieren Grundlegende Verw...
js implementiert Tabellen-Drag-Optionen
In diesem Artikelbeispiel wird der spezifische JS...
CocosCreator Universal Framework Design Network
Inhaltsverzeichnis Vorwort WebSocket verwenden Er...