Monat: Mai 2014

Meta viewport tag bringt Webseite auf iPhone durcheinander

7. Mai 2014 - wordpress

Die Webseite ist fertig und sieht auf Firefox, Safari, Chrome, IE und diversen Em- und Simulatoren gut aus. Du bist zufrieden, bis Dir dann ein Kollege sein neues iPad unter die Nase hält.

English Summary: If your new website looks garbled on some mobile devices, just have a look at the meta viewport declaration before searching high and low.

Wie konnte das passieren? Du hast ein responsive web design ( ein 2012er WordPress Theme) als Grundlage gewählt und nur mäßig abgewandelt. Aber auf dem iPad wird die Webseite und ein Drittel der Navigation rechts abgeschnitten.

Noch schlimmer: auf dem iPhone stimmt die Breite, aber der gesamte Content unter dem Titel quetscht sich in die linke Ecke. Dito Blackberry.
Stundenlanges Suchen ist angesagt.

Wenn man dann doch nicht den Verursacher findet, hilft vielleicht eine Anfrage bei stackoverflow.

http://stackoverflow.com/questions/13844684/ipad-cropping-issue

In deinem Theme steht
<meta name=“viewport“ content=“width=device-width“/>

Wenn man das ersetzt durch

<meta name=“viewport“ content=“width=960px“/>  

also explizit die Breite Deiner Webseite angibt, ist die Welt wieder in Ordnung.

Eine Erklärung findet sich hier

http://www.html5rocks.com/en/mobile/high-dpi/?redirect_from_locale=de

Die Ursache liegt wohl in der hohen Auflösung neuerer mobiler Geräte. Dadurch wird der Viewport nicht richtig gesetzt.