Zoom und position:fixed im Internet Explorer 9 auf Windows Phone

MEMO Diesen Beitrag auf der neuen Seite lesen

So mancher Webdesigner ist schon verzweifelt an der Art und Weise wie der Internet Explorer 9 von Windows Phone 7 mit style=position:fixed und eventuell darin enthaltenem Text umgeht.

So sieht das ganze für viele aus, der eine Text klein, ein anderer wieder so groß, dass er die Tabellen sprengt.
Nun gibt es - Microsoft hat doch etwas mitgedacht - einen einfachen Workaround per CSS.

Man kann den Text-Zoom ausschalten, selber einstellen oder es weiterhin dem Internet Explorer überlassen:

Text-Zoom für alles deaktivieren:
html { -ms-text-size-adjust:none }

Text-Zoom im <body>-Bereich dem IE überlassen:
body { -ms-text-size-adjust:auto }

Text um 150% vergrößern innerhalb eines div:
div { -ms-text-size-adjust:150% }

Klar, der W3C-Validator wird massiv meckern, man hätte eine Zeile im Quellcode, die sich nicht an Standards hält, aber das nehmen wir gerne in Kauf, oder? ;)

Übrigens lässt sich das ganze auch so einbinden, falls ein einzelner Teil nicht gut aussieht:
< span style="-ms-text-size-adjust:none">Ihr Text< /span>

Für diese Website habe ich es für html{} genommen, da der IE9 von WP7 nicht mit position:fixed eines span oder div klar kommt, den Text zoomt und man sein unteres Menü mitten in der Seite wieder findet, wie am Screenshot oben.

Zum Vergleich:

Sieht doch gleich besser aus, oder? Händischer Zoom ist natürlich kein Problem, der Text wird proportional, wie durch das CSS bestimmt, gezoomt:

Sieht aus wie am Desktop - super Ergebnis!

$\\\\$ Startseite | Infoportal | Kontakt

Infoportal Zoom und position:fixed im Internet Explorer 9 auf Windows Phone

Zurück Nach oben Neue Seite