nicht angemeldet
Windows Phone 8 - Media Queries und Viewport
Hallo werte Selfgemeinde,
bei der aktuellen Entwicklung eines Layouts für ein Projekt, bin ich über folgendes Problem gestolpert:
Ich verwende Media Queries der Art
@media screen and (min-width: 20em) and (max-width: 29.9375em) { ... }
Bei Tests mit meinem Nokia Lumia 520 stellte ich zu meiner Überraschung fest, dass nicht die erwartete Rule matched, sondern stattdessen jeweils die, deren Breitenangabe mit der Display-Auflösung übereinstimmen.
Diese beträgt bei dem Lumia 480 x 800 Pixel, wohingegen die Viewportgöße lediglich 320 x 480 Pixel beträgt.
Eine Google Recherche ergab unter anderem den folgenden informativen Treffer:
Responsive Design in IE10 on Windows Phone 8
Entgegen dem letzten Update in dem Artikel (vom 15.10.2013) halte ich das "Problem" keineswegs für "gelöst". Denn egal ob mit oder ohne den Viewport Meta-Tag und/ oder irgendwelche '@-ms-viewport' Angaben, triggert der IE grundsätzlich MQs nach der Displaygröße.
Einzig unter Verwendung der angegebenen Javascript-Funktion triggert er die MQs nach der Viewportgröße.
Fragen:
1. Ist sonst schon wer über das "Problem" gestolpert?
2. Wenn ja, wie hast du es "gelöst"?
3. Hab' ich irgendetwas "falsch" verstanden, bzw. mache ich etwas falsch?
Gruß Gunther
-
Hallo,
hast du mal einen Link zu deiner Seite? Aus deinen Angaben ist (für mich jedenfalls) dein Problem nicht so richtig nachvollziehbar.
Zudem werden wohl nur wenige User hier über ein Phone mit Windows 8 verfügen.
Aus deinen Angaben habe ich den Eindruck, das du dir das Erstellen von Seiten unnötig schwer machst, indem du ohne ersichtlichen Grund Sonderwege gehst.
Zum Beispiel ist es eher ungewöhnlich bei Media-Queries min-width und max-width gleichzeitig zu nutzen. Da sollte eher die Cascadierung des CSS genutzt werden.
Dadurch scheinst du die Media-Queries nicht abhängig vom Inhalt zu nutzen, aber das kann man erst genau sehen, wenn man deine Seite kennt.
Außerdem hat es sich bewährt, bei Media-Queries px als Einheit zu nutzen, da dies der Auflösung der Bildschirme entspricht. em ist eher für Schriftgrößen konzipiert und wird durch die Vererbung vom CSS beeinflusst, was bei Media-Queries eher nicht erwünscht ist und zu unerwarteten Problemen führen kann.
Im Moment habe ich den Eindruck, das dein Problem eher hausgemacht ist. Das eigentliche Problem scheint eher zu sein, das du mit HTML5 / CSS3 noch nicht auf einer Linie bist.
Aber ohne Link zu Seite kann ich auch nur raten.
Gruss
MrMurphy
-
Hallo,
hast du mal einen Link zu deiner Seite? Aus deinen Angaben ist (für mich jedenfalls) dein Problem nicht so richtig nachvollziehbar.
Nein, habe ich nicht.
Das "Problem" sollte aber dennoch für jeden nachvollziehbar sein. Es geht darum, welche Viewportgröße der IE Mobile zugrunde legt für das Triggern der Media Queries.Zudem werden wohl nur wenige User hier über ein Phone mit Windows 8 verfügen.
Das mag sein, und trotzdem betrifft es alle, die ein responsives Layout erstellen ...!
Aus deinen Angaben habe ich den Eindruck, das du dir das Erstellen von Seiten unnötig schwer machst, indem du ohne ersichtlichen Grund Sonderwege gehst.
Ups, das wäre mir jetzt neu, dass ich Sonderwege gehe ...!
Zum Beispiel ist es eher ungewöhnlich bei Media-Queries min-width und max-width gleichzeitig zu nutzen. Da sollte eher die Cascadierung des CSS genutzt werden.
Das kommt imho eher darauf an ..., denn wenn du nur min- oder max-width nutzt, musst du eben genau aufgrund der Kaskade *alle* Eigenschaften (die sich ändern) auch in jeder Rule wieder überschreiben.
Ich achte normalerweise darauf, (auch) mein CSS so klein wie möglich zu halten.
Dadurch scheinst du die Media-Queries nicht abhängig vom Inhalt zu nutzen, aber das kann man erst genau sehen, wenn man deine Seite kennt.
Wie kommst du jetzt bitte darauf!?
Außerdem hat es sich bewährt, bei Media-Queries px als Einheit zu nutzen, da dies der Auflösung der Bildschirme entspricht. em ist eher für Schriftgrößen konzipiert und wird durch die Vererbung vom CSS beeinflusst, was bei Media-Queries eher nicht erwünscht ist und zu unerwarteten Problemen führen kann.
Welche "Probleme" sollten das sein?
Du kennst den Unterschied zwischen der Verwendung von Pixeln und EMs in MQ?
Nein, dann ändere mal die Standard-Schriftgröße in deinem Browser. ;-)Im Moment habe ich den Eindruck, das dein Problem eher hausgemacht ist.
Hausgemacht ja, aber nicht von mir, sondern von Microsoft.
Das eigentliche Problem scheint eher zu sein, das du mit HTML5 / CSS3 noch nicht auf einer Linie bist.
Das mag sein, hat aber nichts mit dem Problem und meiner Frage zu tun.
Aber ohne Link zu Seite kann ich auch nur raten.
Nein, du musst nicht raten. Denn das Verhalten des IE Mobile unter WP 8 hat nichts mit meiner Seite zu tun, sondern betrifft den Browser im allgemeinen.
Aber trotzdem besten Dank für deine Antwort.
Gruß Gunther
-