Zusammenfassung der WEBAPP-Entwicklungskompetenzen (Hinweise zur Entwicklung mobiler Websites)

1. Um das Web responsive zu entwickeln, muss sich die Seite an die Bildschirmgröße anpassen. Sie können ein flüssiges Layout verwenden, wie im vorherigen Artikel (adaptives Breitenlayout). Andere spezifische kleinere Probleme können durch die Verwendung von Medienabfragen gelöst werden (lassen Sie den IE CSS3-Medienabfragen unterstützen, um responsives Webdesign und CSS3-Medienabfragen zu erreichen).
2. Da die meisten Mobiltelefone über fortschrittliche Browser verfügen, können Sie die HTML5+CSS3-Entwicklung verwenden;
3. Verwenden Sie Meta-Tags sinnvoll und flexibel, wie folgt:

4. Achten Sie auf die Größe des Links, da es sich bei den meisten um Touchscreen-Telefone handelt und Benutzer daher problemlos auf das Etikett klicken können sollten (ich habe zuvor einen Artikel dazu gesehen, kann die Quelle jetzt aber nicht finden. Die Mindestgröße scheint 42 x 42 Pixel zu betragen):

Die Größe des Bedienobjekts richtet sich nach der Fingerbedienung und die Größe der Taste wird gemäß der Spezifikation festgelegt:
Der Zeigefingerklickabstand beträgt ca. 7*7 mm, 1mm Abstand,
Daumenklick 8 x 8 mm, 2 mm Abstand. Der derzeit empfohlene Wert liegt bei 9 mm, der Mindestwert sollte jedoch nicht unter 7 mm liegen.
Natürlich können einige wichtige Vorgänge oder häufig angeklickte Bereiche etwas größer eingestellt werden.

5. Es sollte eine sanfte Degradation (sanfte Degradation) erreicht werden und JS und Bilder sollten weniger verwendet werden. Die Seite sollte auch ihren Wert widerspiegeln, wenn Benutzer das Herunterladen von JS und Bildern verbieten (da viele Apps standardmäßig so eingestellt sind, dass Bilder und andere Ressourcen unter 3G nicht automatisch heruntergeladen werden).
6. Stellen Sie zur Bildverarbeitung einfach die Breite ein, um das Bild anpassungsfähig zu machen und Verformungen zu verhindern. Wenn die Auflösungen kompatibler Geräte stark variieren, müssen Sie natürlich Medienabfragen verwenden, um unterschiedliche Bilder entsprechend der unterschiedlichen Auflösung zu laden (dasselbe Bild muss auf mehrere unterschiedliche Spezifikationen eingestellt werden). Dies soll verhindern, dass Geräte mit kleiner Auflösung große Bilder laden und Datenverkehr verschwenden, und dass Geräte mit großer Auflösung kleine Bilder laden und Bildunschärfe verursachen.
7. Wenn die Auflösung zu niedrig eingestellt ist und die normalen Module zu überladen erscheinen, können Sie Medienabfragen verwenden, um Module je nach Auflösung entsprechend anzuzeigen oder auszublenden, z. B. die Anzeige eines 2-Spalten-Layouts mit 768 Pixeln und eines 1-Spalten-Layouts mit 320 Pixeln.

8. Natürlich können Sie auch basierend auf verschiedenen Terminals zu verschiedenen URLs springen, siehe: JavaScript für mobile Terminals wie Mobiltelefone und Tablets zur Anpassung an Sprung-URLs
9. Es gibt viele mobile Browser und die Standardverarbeitungsmethoden mobiler Systeme sind ebenfalls unterschiedlich. Das Kompatibilitätsproblem ist nicht einfacher als bei der PC-Version. Daher müssen die häufig verwendeten Verarbeitungsmethoden zusammengefasst werden, z. B. -webkit-tap-highlight-color:rgba(0,0,0,0); /*Linkhervorhebung deaktivieren*/ -webkit-touch-callout:none; /*Link deaktivieren, lange drücken, um das Optionsmenü anzuzeigen*/ usw.
10. Der Datenverkehr ist für Mobiltelefone und Tablets sehr wichtig. Daher sollten die Namen der Klassen und IDs in der Webanwendung so diskret wie möglich sein, z. B. hd für den Kopf, bd für die Mitte, ft für den unteren Teil usw. (Dieser Vorschlag steht noch aus, da er berücksichtigt, ob er für die spätere Wartung und andere Probleme praktisch ist.)