Hast Du schon mal geschaut wie Deine Webseite unter Windows 8 im Internet Explorer im Snapped View aussieht? Vermutlich so ähnlich wie dieser Screenshot:

clip_image002

In diesem Fall ist es mein Stream Blog http://writeline.io der einfach auf die 320 Pixel runterskaliert wird. Dieses Blog unterstützt Responsive Design und könnte sich doch genauso darstellen wie auf einem Mobiltelefon, doch das passiert nicht. Der ein oder andere mag aus der mobilen Webentwicklung bereits das Viewport Metatag kennen.

<meta name="viewport" content="width=device-width">

Dieses selbst langt nicht um die Seite korrekt anzuzeigen.

Die standardkonforme Viewport Definition

Warum ist das so? Nun, der Internet Explorer setzt auf Standards. Und es gibt einen Standard der die Viewport Definition in CSS zulässt: Die W3C @viewport CSS Regel. In Kombination mit CSS Media Queries lassen sich sowohl Snapped als auch der Portrait Modus abfragen. Hier eine Lösung für meine obige Webseite:

@media screen and (max-width: 480px) {
@-ms-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
}

@media screen and (max-width: 959px) and (min-width: 768px) {
@-ms-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
}

Und das Ergebnis ist eine korrekte Darstellung mit dem Responsive Design das die Webseite unterstützt.
 

clip_image004