Da das iPad mittlerweile meine Haupt-Surf-Maschine ist, soll mein Blog natürlich auch dort besonders gut aussehen. Da der mobile Safari jedoch einiges etwas anders macht wie sein großer Bruder, ergeben sich hier und da kleine Probleme…

1) Problem – Runde Ecken bei Inputfeldern

Im mobile Safari werden alle Inputfelder, Textareas und Buttons mit runden Ecken versehen. An sich schick, will man aber nicht unbedingt immer haben.

Mit CSS ganz einfach.

input, textarea {
-webkit-border-radius:0;
}

2) Problem – Background: fixed

Der Hintergrund scrollt immer mit. Background: fixed geht nicht, da der mobile Safari ja auch in dem Sinne nicht scrollt, sondern stets die ganze Seite anzeigt.

Daher keine Lösung… Oder weiß jemand eine?

3) Problem – Unterschiedliche Auflösung

iPhone, iPhone4, iPod und iPad haben unterschiedliche Auflösungen. Da man, gerade bei schmalen Layouts, die Seite passend anzeigt haben will, hilft im header:

<meta name = “Viewport” content = “width=device-width”>

4) Problem – Striche im Hintergrund

Auf nicht Retina-Displays werden Hintergrund-Bilder nicht richtig gekachelt. Je nach Zoom-Stufe sieht man Striche.
Die Lösung ist denkbar einfach: Keine Hintergrundfarbe in background verwenden, sprich nur:

background: url(Bild);

Weitere Probleme?

Wem noch etwas auffällt, das anders gemacht wird, der möge sich bitte in den Kommentaren melden.