Die folgenden Spezifikationsempfehlungen sind allesamt Erfahrungen, die von Alloyteam während der täglichen Entwicklung zusammengefasst und verfeinert wurden. Diese Spezifikationen haben sich in echten Projekten als effektiv erwiesen und werden wärmstens empfohlen.

Schriftart-Einstellungen

Sans-Serif-Schriftarten verwenden

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

iOS 4.0+ verwendet die englische Schriftart Helvetica Neue, und frühere iOS-Versionen greifen auf Helvetica zurück. Die chinesische Schriftart ist auf STHeiTi eingestellt. Es ist zu beachten, dass STHeiTi nicht in der iOS-Schriftartenbibliothek existiert (http://support.apple.com/kb/HT5484?viewlocale=en_US), aber das System wird STHeiTi automatisch der systemstandardmäßigen chinesischen Schriftart zuordnen, Heiti Simplified oder Heiti Traditional.

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

Auf nativem Android sollten sowohl chinesische als auch englische Schriftarten die Standard-Sans-Serif-Schriftart verwenden.

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

Grundlegende Interaktion

Legen Sie globale CSS-Stile fest, um das in der Abbildung dargestellte Pop-up-Menü bei langem Drücken und das Textauswahlverhalten zu vermeiden.

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

user-select

Mobile Leistung

Berücksichtigen Sie die Leistung auf Low-End-Android-Geräten und in 2G-Netzwerk-Szenarien.

Erforderliche Prüfungen vor der Veröffentlichung

  • Alle Bilder müssen komprimiert werden.
  • Erwägen Sie eine moderate verlustbehaftete Kompression, z. B. die Konvertierung in JPEG-Bilder mit 80% Qualität.
  • Erwägen Sie, große Bilder in mehrere kleinere Bilder zu unterteilen, üblicherweise in Szenarien, in denen das Bannerbild zu groß ist.

Optimieren Sie die Ladeleistung, um ein ausreichend schnelles Öffnen zu erreichen.

  • Offline-Daten: Erwägen Sie, Daten in localStorage zwischenzuspeichern.
  • Anzahl der anfänglich angeforderten Ressourcen< 4 Hinweis!
  • Verwenden Sie CSS Sprites oder DATAURI für Bilder.
  • Vermeiden Sie die Verwendung von @import in externem CSS.
  • Erwägen Sie, kleine statische Ressourceninhalte inline einzubinden.
  • Gesamtgröße der anfänglich angeforderten Ressourcen nach gzip< 50kb
  • Sind statische Ressourcen (HTML/CSS/JS/IMAGE) optimiert und komprimiert?
  • Vermeiden Sie das Bündeln großer Bibliotheken.
  • Stellen Sie sicher, dass die Gzip-Komprimierung auf der Zugriffsebene aktiviert ist.
  • Verwenden Sie nach Möglichkeit CSS3 anstelle von Bildern.
  • Bildressourcen außerhalb des anfänglichen ersten Bildschirms müssen verzögert geladen werden.Hinweis!
  • Bei Single-Page-Anwendungen (SPA) sollten Sie das verzögerte Laden von Business-Modulen abseits des ersten Bildschirms in Betracht ziehen.

Optimieren Sie die Laufzeitleistung für einen reibungslosen Betrieb.

  • Vermeiden Sie das Problem der iOS-Klickverzögerung von 300+ms.Hinweis!
  • Cachen Sie DOM-Selektionen und Berechnungen.
  • Vermeiden Sie Vorgänge, die Seiten-Repaints auslösen.
  • Wenden Sie Debouncing auf kontinuierlich ausgelöste Ereignisse (scroll/resize) an, um eine hochfrequente Ausführung zu vermeiden.
  • Verwenden Sie nach Möglichkeit Event-Delegation, um das Batch-Binden von Ereignissen zu vermeiden.
  • CSS3-Animationen anstelle von JS-Animationen verwenden.
  • Vermeide die Verwendung einer großen Anzahl von CSS3-Verläufen und Schatteneffekten auf Low-End-Geräten; ziehe reduzierte Effekte in Betracht, um die Geschmeidigkeit zu verbessern.
  • Halte die HTML-Strukturhierarchie einfach genug; es wird empfohlen, nicht mehr als 5 Ebenen zu verwenden.
  • Verwende erweiterte CSS-Selektoren und Universalselektoren so wenig wie möglich.
  • Halte es einfach

Leitfaden zur Verwendung des Online-Tools zur Leistungsprüfung und -bewertung

  • BesucheGoogle PageSpeedOnline-Bewertungswebsite
  • Gib die Ziel-URL-Adresse in die Adressleiste ein, klicke auf die Schaltfläche Analyze, um den Test zu starten.
  • Optimiere gemäß den von PageSpeed analysierten Vorschlägen und behebe vorrangig Probleme in der roten Kategorie.

Quelle: http://www.zjgsq.com/1339.html