Spezifikationen für die mobile Webentwicklung im Detail

Die folgenden Spezifikationen und Vorschläge basieren alle auf den von Alloyteam im täglichen Entwicklungsprozess zusammengefassten und extrahierten Erfahrungen. Die Spezifikationen basieren auf guten Projektpraktiken und werden dringend empfohlen.

Schriftarteinstellungen

Serifenlose Schriftart verwenden

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }

iOS 4.0+ verwendet die englische Schriftart Helvetica Neue und frühere iOS-Versionen wurden auf die Verwendung von Helvetica heruntergestuft. Die chinesische Schriftart ist auf Chinesisch fett STHeiTi eingestellt. Es muss hinzugefügt werden, dass das chinesische HeiTi nicht in der iOS-Schriftartenbibliothek vorhanden ist, das System jedoch automatisch das chinesische HeiTi abgleicht, das mit der chinesischen Standardschriftart HeiTi-Simplified oder HeiTi-Traditional

Heiti SC Light 黑体-简 细体 Heiti SC Medium 黑体-简 中黑 Heiti TC Light 黑体-繁 细体 Heiti TC Medium 黑体-繁 中黑

des Systems kompatibel ist Native chinesische Android-Schriftart. Die standardmäßige serifenlose Schriftart ist für englische Schriftarten ausgewählt.

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 其他第三方 Android 系统也一致选择默认的无衬线字体

Grundlegende Interaktion

Stellen Sie den globalen CSS-Stil ein, um das Popup-Menü durch langes Drücken zu vermeiden Textverhalten im Bild

a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }

Mobile Leistung

Berücksichtigen Sie die Leistung von Android-Low-End-Geräten und 2G-Netzwerkszenarien

Notwendige Prüfpunkte vor der Veröffentlichung

Alle Bilder müssen komprimiert werden

Erwägen Sie eine mäßige verlustbehaftete Komprimierung, z. B. die Konvertierung in ein JPG-Bild mit 80 % Qualität

Erwägen Sie, das große Bild in mehrere kleine Bilder zu zerschneiden, was in vielen Ländern üblich ist Szenarien, in denen das Bannerbild zu groß ist

Ladeleistung ist optimiert, um schnell genug zu öffnen

Daten sind offline, erwägen Sie das Zwischenspeichern von Daten in localStorage

Anzahl der anfänglich angeforderten Ressourcen < 4 Achtung!

Verwenden Sie CSS Sprites oder DATAURI für Bilder

Vermeiden Sie die @import-Einführung in externes Link-CSS

Erwägen Sie die Einbettung kleiner statischer Ressourceninhalte

Ressource gzip Total zunächst anfordern Endvolumen

Sind statische Ressourcen (HTML/CSS/JS/IMAGE) für die Komprimierung optimiert?

Vermeiden Sie das Packen großer Klassenbibliotheken.

Stellen Sie sicher, dass die Gzip-Komprimierung auf der Zugriffsebene aktiviert ist.

Versuchen Sie, CSS3 anstelle von Bildern zu verwenden.

Bildressourcen darüber hinaus der anfängliche erste Bildschirm Lazy Loading erforderlich.

Single-Page-Anwendungen (SPA) erwägen, das Laden von Nicht-First-Screen-Business-Modulen zu verzögern

Optimieren Sie die Laufleistung, um einen ausreichend reibungslosen Betrieb zu erreichen

Vermeiden Sie iOS-Klicks mit mehr als 300 ms Verzögerungsproblem Hinweis!

Cache-DOM-Auswahl und -Berechnung

Vermeiden Sie Vorgänge, die ein Neuzeichnen der Seite auslösen

Kontinuierlich ausgelöste Ereignisse entprellen (Bildlauf/Größenänderung), um eine hochfrequente Triggerausführung zu vermeiden

Verwenden Sie so weit wie möglich Ereignis-Proxys, um eine Batch-Bindung von Ereignissen zu vermeiden

Verwenden Sie CSS3-Animationen anstelle von JS-Animationen

Vermeiden Sie die Verwendung vieler CSS3-Verlaufsschatteneffekte auf Low-End-Maschinen und denken Sie darüber nach Herabstufung der Effekte zur Verbesserung der Glätte Grad

Halten Sie die HTML-Strukturebene einfach genug, es wird empfohlen, nicht mehr als 5 Ebenen zu haben

Verwenden Sie so wenig wie möglich erweiterte CSS-Selektoren und Wildcard-Selektoren

Keep it simple

Leitfaden zur Verwendung von Online-Leistungstest- und Bewertungstools

Besuchen Sie die Online-Bewertungswebsite von Google PageSpeed

Geben Sie die Ziel-URL-Adresse in das ein Adressleiste und klicken Sie auf die Schaltfläche „Analyse“, um den Test zu starten

Drücken Sie „Optimieren Sie die von PageSpeed ​​analysierten Vorschläge und geben Sie der Lösung der Probleme der roten Kategorie Vorrang“