retrospace - Beitrag lesen

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

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

[inturl=./upload/files/1_zoomein.jpg][img]./upload/files/thumbs/1_zoomein.jpg.jpg[/img][/inturl]

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:

[b]Text-Zoom für alles deaktivieren:[/b]
[highlight]html { -ms-text-size-adjust:none }[/highlight]

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

[b]Text um 150% vergrößern innerhalb eines [i]div[/i]:[/b]
[highlight]div { -ms-text-size-adjust:150% }[/highlight]

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:
[highlight]< span style="-ms-text-size-adjust:none">[b]Ihr Text[/b]< /span>[/highlight]

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

Zum Vergleich:
[inturl=./upload/files/1_zoomaus.jpg][img]./upload/files/thumbs/1_zoomaus.jpg.jpg[/img][/inturl]

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

[inturl=./upload/files/1_zoommanual.jpg][img]./upload/files/thumbs/1_zoommanual.jpg.jpg[/img][/inturl]

Sieht aus wie am Desktop - super Ergebnis!

Schlüsselwörter: position, fixed, windows, phone, 7.5, mango, internet, explorer, transparent, png, bottom, menue, line, table, div, lumia, 800, 900, 920, 820, htc, samsung, omnia, wildfire, touch, zoom, text, vergrößerung, darstellung, ausschalten, verändern, change

Beitrag von freaked 2413 Klicks | Quelle
Geschrieben am: 02.09.2012, 17:47:58 Uhr
Zuletzt überarbeitet: 08.11.2022, 08:44:26 Uhr

Kommentare