Viewport-Einstellungen Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> initial-scale: Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, d.h. auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt z.B. 2.0 zu einer 2x-fachen Vergrößerung. user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder ni ... mehr

Prinzipiell verhalten sich Browser auf mobilen Geräten genau so wie ihre großen Brüder auf dem Desktop. Vorbei sind die Zeiten, in denen eine mobile Webseite eine vereinfachte, abgespeckte Version der "echten" Webseite war. Trotzdem gibt es, bedingt durch die verschiedenen Formfaktoren von Handys und Tablets, ein paar Eigenheiten, auf die wir achten müssen, damit unsere User auch auf mobile Geräten eine gute User Experience bekommen. Eine dieser Eigenheiten ist die Layout-Berechnung, die regelt, wie Seiten ausgelegt und angezeigt werden. Um zu verstehen, was auf mobilen Geräten passiert, und wie wir das Layout besser kontrollieren können, schauen wir uns ... mehr

Das style-Objekt wird immer wieder missverstanden: Sie können über das style-Objekt nicht den aktuellen, berechneten Wert einer CSS-Eigenschaft auslesen. Sie können damit lediglich Inline-Styles setzen und die bereits gesetzten auslesen. Die besagten Objekteigenschaften (.style.cssEigenschaft) sind allesamt leer, wenn sie nicht im betreffenden HTML-Element über ein style-Attribut oder wie beschrieben mit JavaScript gesetzt wurden. Folgendes Beispiel verdeutlicht dies: <p id="ohne-inline-styles">Element ohne Inline-Styles</p> <p id="mit-inline-styles" style="color: red">Element mit Inline-Styles</p> // Gibt einen leeren String aus: alert(docume ... mehr

Das am weitesten verbreitete Problem dürfte die Kombination aus width:100% und padding/margin/border darstellen. Da deren Werte gemäß CSS-Boxmodell addiert werden, ergibt sich eine Breite von über 100 Prozent. Zwar soll es künftig möglich sein, W3C-konformen Browsern mittels box-sizing das Box-Modell des Internet Explorer aufzuzwingen, doch wäre es wünschenswert, Ausmaße in der Form em ± px notieren zu können. #a, #b {   float: left;   border: 3px double black;   width: 50%;   box-sizing: border-box; } Ergebnis: Da die 50 Prozent für die Außenbreite einschließlich Rahmen gelten und der In ... mehr

CSS bis einschließlich Version 2.1 erlaubt die Zuweisung relativer oder absoluter Werte, beispielsweise mittels width einer Breite von 100%, 30em oder 200px. Problematisch ist dies vor allem dann, wenn Einheiten gemischt notiert werden müssen, da eine Umrechnung nicht zuverlässig möglich ist. Das am weitesten verbreitete Problem dürfte die Kombination aus width:100% und padding/margin/border darstellen. Da deren Werte gemäß CSS-Boxmodell addiert werden, ergibt sich eine Breite von über 100 Prozent. Zwar soll es künftig möglich sein, W3C-konformen Browsern mittels box-sizing das Box-Modell des Internet Explorer aufzuzwingen, doch wäre ... mehr