Mobile Optimization

Um Webseiten für den mobilen Screen zu optimieren gibts einige Tipps & Tricks.

Zuerst sollte der viewport für mobile Geräte richtig eingestellt werden:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

Weiter kann für Apple's iOS die Homescreen App konfiguriert und die Status Bar angepasst werden:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Im Hauptverzeichnis kann ein Icon "/apple-touch-icon.png" für die Verknüpfung abgelegt werden.

Beim Entwickeln für Mobile Geräte ist sehr hilfreich solche im Browser direkt zu emulieren.

Der Browser Chrome von Google hat eine solche Funktionalität schon eingebaut: