CSS: width:100% beim iPad und anderen Tablets

Wenn man beim iPad oder auch anderen Tablets den Footer oder Header per CSS auf width:100% setzt gibt es meistens Darstellungsprobleme. Die divs scheinen dann nicht komplett bis zum Rand durchzugehen.

Das liegt an den voreingestellten Viewport Werten der jeweiligen Geräte. Das CSS width:100% orientiert sich dann daran und verwendet auch nur diese maximale Breite.

Zu den absoluten Grundlagen der mobilen Entwicklung gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

Dad Problem lässt sich recht schnell mit dem Meta Element viewport lösen. Damit kannst Du den dargestellten Ausschnitt der Webseite anpassen und damit auch die volle Breite bei width:100% bestimmen

<meta name="viewport" content="width=[passende Breite in px]" />

Danach sieht alles wieder super aus!

iPad width:100% CSS

Android width:100% CSS

2 Kommentare » Schreibe einen Kommentar

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.