nicht angemeldet
@@Gunnar:
nuqneH
Das machst du hoffentlich nur zu Testzwecken so, oder? Mehrere Stylesheets sind keine gute Idee, aus mehreren Gründen.
Ja, die Stylesheets sind nur während der "Testphase" separiert (der besseren Übersichtllichkeit wegen).
Ich stimme deinen Punkten völlig zu.
Auch wenn ich es persönlich für einen konzeptionellen Fehler halte, dass quasi immer "Alles" an "Jeden" ausgeliefert wird (werden muss), insbesondere mit Blick auf Mobile Devices ... - aber das ist ein anderes Thema.
max-/min-device-width ist vermutlich nicht das, was du verwenden willst. “There are two relevant media queries: width/height and device-width/device-height. […] Which should you use? That’s a no-brainer: width, of course.
Nein, eigentlich möchte ich schon device-xyz verwenden ...(zwar in Kombination mit min/max-width)!
Zur Erklärung, bzw. meiner Absicht/ meinem angepeilten Ziel (vlt. gibt es ja auch eine andere Lösung/ Möglichkeit):
1. Ich möchte es vermeiden, eine komplett eigene Mobile-Version der Site zu erstellen.
2. Ich möchte die (Haupt-)Navigation auf mobilen Endgeräten per <select> realisieren, ohne mich dabei auf Javascript verlassen zu müssen, während sie auf anderen Screens als <ul> umgesetzt werden soll.
Web developers are not interested in the device width; it’s the width of the browser window that counts.” [viewports]
Richtig, aber ...
... auf mobilen Endgeräten sind die identisch (zumindest bisher, da mir nicht bekannt wäre, dass es selbst auf Tablets bisher die Möglichkeit gäbe, die Fenstergröße zu verändern).
Ich will also im ersten Schritt "nur" wissen, ob der User ein größeres Display hat und bspw. nur sein Browserfenster nicht maximiert hat.
[Exkurs]
Was mich auf fast allen Seiten, die Media Queries verwenden, massiv stört ist, dass wenn man sich diese Seiten bspw. auf einem Monitor mit Full HD Auflösung anguckt und dann aus welchen Gründen auch immer eine bestimmte Stelle vergrößert betrachten möchte, sich plötzlich beim Zoomen das komplette Layout ändert. Die unausweichliche Konsequenz ist, dass die eigentliche Stelle natürlich nicht mehr im "Blickfeld" ist und man aber auch keine Ahnung hat, wo sie denn nun auf einmal zu finden ist, da man ja aufgrund des Zooms nur einen vergleichsweise kleinen Teil der Seite überblickt.
Dieses Verhalten ist auf mobilen Endgeräten noch viel ärgerlicher ...!
In meinen Augen ist das aus Usability-Sicht ein absolutes no go!
IMHO sollten sich Media Queries also immer und ausschließlich auf eine Zoomstufe von 100% beziehen. Alles andere liegt dann rein in den Händen des Users und sollte nicht mehr von anderen Dingen "beeinflusst" werden.
Vielleicht gibt der Artikel auch die Antwort auf das Verhalten des Firefox? Rundungsfehler beim Umrechenen zwischen CSS-Pixeln und Device-Pixeln?
Den Artikel habe ich, wie (fast) alle anderen auch, die unter den ersten 50 Suchtreffern aller relevanten Suchbegriffe bei Google gefunden werden), schon gelesen.
Und eigentlich sagt der Artikel auch genau das, was ich selber nach meinem Verständnis auch erwarten würde, nämlich:
"
Screen size
Let’s take a look at some practical measurements. We’ll start with screen.width and screen.height. They contain the total width and height of the user’s screen. These dimensions are measured in device pixels because they never change: they’re a feature of the monitor, and not of the browser."
Wobei der entscheidende Part dieser hier ist:"... are measured in device pixels because they never change"!
Tja, leider scheint Mozilla das anders zu sehen ...
Und ich konnte bislang immer noch nichts zu diesem Thema finden, auch nicht auf dem Mozilla Developer Network.
Ich danke dir jedenfalls für deine Antwort.
Und da du bisher der Einzige warst, der überhaupt geantwortet hat, werte ich das mal so, dass die Anderen auch keine (logische) Erklärung für das Verhalten des FFs haben ...!
Aber als Webseitenersteller ist man es ja ohnehin gewohnt, sich mit der einen oder anderen "Macke" eines Browsers abzufinden.
Gruß Gunther
Gunnar Bittersmann