Neben dem bereits veröffentlichten Post können folgende zwei Seiten eine Hilfe bei der Programmierung von Webseiten für’s iPhone sein:

www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten
www.kulturbanause.de/2008/09/websites-fur-das-iphone-erstellen-und-optimieren

In der letzten Zeit habe ich mich ein wenig mit dem Thema Webseitenoptimierung für’s iPhone auseinander gesetzt. Hier eine kleine Zusammenstellung von Möglichkeiten wie man ein iPhone erkennt und den richtigen Content ausgeben kann.

Mit Javascript


if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.domain.ch/iphone";
}
}


mit PHP


if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://m.domain.ch/iphone');
exit();
}


Beide Beispiele kommen von davidwalsh.name/detect-iphone

iPhone-Bildschirmgrösse als Viewport setzen

Um die Webseitengrösse auf das iPhone zu optimieren kann man die Viewportgrösse definiert werden. Dies erlaubt es den Inhalt auf die Bildschirmbreite zu optimieren.

Mit Viewport werden die Webseiten für die optimale Ansicht herunterskaliert, so dass sie den Brwoser möglichst optimal ausfüllen

Für das iPhone ein spezielles Icon definieren

Im iPhone kann ein Bookmark einer Internetseite als „App“ auf dem Homescreen eingefügt werden. Normalerweise nutzt das iPhone dazu ein Printscreen der Webseite als Icon. Über folgenden Tag kann man dafür jedoch ein eigenes Icon definieren welche für das iPhone optimiert ist.
Die Grafik muss 57x57px gross und im *.png Format gespeichert sein. Der Schein sowie die runden Ecken müssen nicht erstellt werden. Dies macht das iPhone automatisch.

Ändern der Textgrösse beim drehen des iPhones unterbinden

Wenn man das iPhone auf’s Querformat dreht, passt Safari die Schriftgrösse automatisch an. Mit folgendem CSS Befehl kann dies verhindert werden:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}


CSS Style nur für’s iPhone

Mit folgender Einstellung kann ein Stylesheet speziell für das iPhone definiert werden:

@media screen and (max-device-width: 480px) {
/* Hier kommt das CSS für's iPhone rein */
}


Autmatisches resize von Bildern für das iPhone

Auf einer Webseite sind die meisten Bilder grösser als 480 Pixel gross. Damit ist die Wahrscheinlichkeit, dass ein Bild grösser als der Bildschirm ist, sehr gross. Mit folgendem CSS Code kann man die Bilder automatisch auf 100% der Bildschirmgrösse verkleinern. Wenn die Bildschirmgrösse des Geräts maximal 480px beträgt, werden die Bilder nie breiter angezeigt.


@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}


Die Toolbar des iPhone per default verstecken

Auf dem kleinen iPhonebildschirm kann es praktisch sein, die Toolbar automatisch auszublenden damit für die Webseite mehr Platz zur Verfügung steht. Dazu kann man folgenden JavaScript Code einsetzen:


window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);


Das Telefon oder die SMS Funktion direkt ansprechen

Auf einer normalen Webseite nutzt man den „mailto:“ Link um eine E-Mailadresse zu verlinken welche mit dem Standard-Mailprogramm geöffnet wird. Im iPhone gibt es die Möglichkeit mit den beiden Prefixen „tel“ und „sms“ direkt die ensprechenden Applikationen auf dem iPhone ansprechen.


Hier klicken zum anrufen
Sende mir ein Text


Pseudo :hover classes für das iPhone

Ohne Maus auf dem iPhone kann auch schlecht eine :hover class ausgeführt werden. Mit ein wenig JavaScript kann die :hover class dennoch angesprochen werden wenn der Finger auf dem Link ruht:


var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className = "";}, false); }

Zusätzlich muss dazu das Stylesheet um folgendes ergänzt werden:


a:hover, a.hover {
/* der gewünschte Hover Effekt */
}


Gefunden auf catswhocode.com