Homepage für iPod/iPhone
Im folgenden beschreibe ich euch, wie man mit einfachen Mitteln eine Homepage erstellt, die man perfekt mit dem iPod und dem iPhone aufrufen kann. Sie ist dann nicht so verzerrt und verschoben.
Als Beispiel könnt ihr auf meinen Blog hier mit eurem iPod/iPhone gehen. Dort ist auch ein Template. Allerdings ist dies ein WordPress Addon. Ähnliches könnt ihr aber nach dem Tutorial selbst bauen.
Vorab, ihr könnt am Ende das Script auch herrunter laden. Ich biete es natürlich zum Download an.
Also, zunächst nehmen wir uns den <head></head> Berreich vor. Dort ist einiges ein zu stellen, damit man ein perfektes Bild hat.
Als erstes muss festgelegt werden, nach welcher Art und Weise eure Seite angezeigt werden soll. Es stehen als gängige Formate Iso und UTF zur verfügung. Ich nutze UTF-8, weil es einfach neuer ist.
Es gibt viele Möglichkeiten, wie man nun seinen Charset setzten kann. Ich mach es gerne als PHP Code so wie es im folgenden gezeigt ist.
<exec>header('Content-Type: text/html; charset=UTF-8')</exec>
Das schreibt ihr einfach in die PHP befehle, also php öffnen “< ?php” und php schließen danach “?>”.
Hinzu kommen folgende zwei Funktionen. Die eine ist eine Meta die wie folgt ausschaut
” name=”viewport” content=”width = 400” ” . Mit Hilfe des Viewport wird festgelegt, welchen Teil man auf der späteren Homepage sehen kann. Normal ist ja wie im Webbrowser, das man eine Seite immer komplett sieht. auch wenn die eigentliche Seite nur 400px in der Breite ist. Mit dem Viewport wird in dieser Funktion die Breite auf 400px beschränkt und komplett angezeigt. Somit ist die Schrift größer und man muss nichtmehr Zoomen, bevor man etwas auf der Seite lesen kann.
Als nächstes kommt nun noch ein Bild, welches dann auf dem Homescreen angezeigt wird für die Seite.
der Befehl dafür lautet wie folgt :
” link rel=”apple-touch-icon” href=”my_icon.png” “. Der rel ist der “relativ name”. Das heißt der name, den die Datei haben soll. “my-icon.png” ist dann das eigentliche Bild. Mein Tipp ist , das Bild kleiner zu halten, allerdings dann in einer hohen Auflösung. Z.B. ein Logo oder so.
( Weiteres folgt )
