Zusammenfassung der mobilen Frontend-Entwicklung

Mobile Frontend-Entwicklung, auch Webapp genannt, ist hauptsächlich für High-End-Mobiltelefone wie iPhone und Android gedacht.

1. Deaktivieren Sie die Drehung des Benutzerbildschirms.

Da es ein Projekt gab, das die Bildschirmdrehung deaktivieren musste, habe ich viele Informationen online überprüft und festgestellt, dass es in der mobilen Version von Webkit überhaupt keine Lösung gibt . Die Apple-API erklärt außerdem, dass wir, damit Benutzer in Safari normal im Internet surfen können, sicherstellen müssen, dass Safari Webinhalte normal (d. h. adaptiv) anzeigen kann, wenn sich das Gerät des Benutzers in einer beliebigen Ausrichtung befindet. Daher verbieten wir Entwicklern dies Das Ausrichtungsänderungsereignis des Browsers kann daher nicht blockiert werden. iOS verbietet daher das Blockieren des Ausrichtungsänderungsereignisses. Gleiches gilt für Android, das die Bildschirmdrehung nicht verbieten kann und daher in Webanwendungen nicht möglich ist. Das Ausrichtungsänderungsereignis kann jedoch verwendet werden, um die Richtung zu bestimmen. Der Anzeigemodus für den horizontalen Bildschirm und der Anzeigemodus für den vertikalen Bildschirm können in zwei Stilen geschrieben werden.

2. Privates Meta-Tag des Webkit-Kernels

1. content="width=device-width; initial-scale=1.0; Maximum-scale=1.0; user-scalable=0" name="viewport" />
2. content="black" name="apple-mobile-web-app-status -bar-style" />
3. content="yes" name="apple-mobile-web-app-capable " />
4. content="telephone=no" name="format-detection" />

(1). Die Hauptsache besteht darin, die Breite des Dokuments und des Geräts auf 1:1 zu beschränken, mit einer maximalen Breite von 1,0, und die Bildschirmskalierung zu verhindern.

(2), Private Label des iPhones, der Stil der Statusleiste oben auf dem iPhone.

(3) Dies ist auch eine iPhone-Eigenmarke, die das Surfen im Vollbildmodus ermöglicht.

(4). Deaktivieren Sie die automatische Erkennung von Nummern als Telefonnummern, da eine Zahlenfolge auf dem iPhone in Blau angezeigt wird und das Hinzufügen anderer Farben zum Stil keine Wirkung zeigt.

3. Entfernen Sie die automatische Erkennung von E-Mail-Adressen durch Android

Android verfügt über eine automatische Postfacherkennungsfunktion, Apple jedoch nicht. Wenn Sie die Mailbox-Erkennungsfunktion entfernen möchten, fügen Sie dem Head ein Meta-Tag hinzu.

1. content="email=no" name="format-detection" />

4. Entfernen Sie die URL-Adressleiste von Android und iOS

1. setTimeout(scrollTo,0,0,0);

Fügen Sie diesen Satz einfach in window.onload ein.

(Referenz: WEB-Frontend http://www.linzenews.com/program/web/2773.html)