Media Queries und Page Zoom

[Gunther]

Hallo werte Selfgemeinde!

Ich "bastel" gerade an einer neuen privaten Seite, die per media queries verschiedene Layouts/Designs für Screens zwischen ca. 320px und 1920px width haben soll. Soweit so gut ...!

Nun bin ich aber im (aktuellen ~ 14.0.1) Firefox über ein Verhalten "gestolpert", welches ich nicht verstehe, weshalb ich hier auf eine entsprechende Erklärung hoffe.

Und zwar binde ich zu Testzwecken folgende 2 Stylesheets ein:

  
<link rel="stylesheet" media="screen and (max-device-width: 959px)" href="style_1.css">  
<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="style_2.css">  

Zunächst passiert auch genau das, was ich erwarte, nämlich die Styles aus style_2.css werden angewendet, wenn ich die Seite auf meinem TFT (1920 x 1080) betrachte.

Zoome ich allerdings die Seite per 'STRG + +' dann werden auf einmal (nach der 6. Zoomstufe) die Styles aus style_1.css angewendet (auf meinem 2. TFT mit 1440 x 900 übrigens nach der 4. Stufe)

Der Firefox ist der einzige von den getesteten Browsern, der ein solches Verhalten zeigt. Weder IE 9, Opera 11.62, noch Chrome 21.0.1180.60 zeigen ein derartiges Verhalten.

Wie eingangs bereits gesagt, verstehe ich nicht, was hier passiert. Von der Logik her, muss der Firefox ja beim Zoomen somit die device-width verändern. Das wäre in meinen Augen aber mehr als nur ein Bug ...!

Neben einer Erklärung für besagtes Verhalten, wäre ich auch für Tipps, wie ich dies im Firefox vermeiden/ umgehen könnte dankbar.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und zwar binde ich zu Testzwecken folgende 2 Stylesheets ein:

<link rel="stylesheet" media="screen and (max-device-width: 959px)" href="style_1.css">

<link rel="stylesheet" media="screen and (min-device-width: 960px)" href="style_2.css">

  
Das machst du hoffentlich nur zu Testzwecken so, oder? Mehrere Stylesheets sind keine gute Idee, aus mehreren Gründen.  
  
1\. Performanz: Browser laden \_alle\_ Stylesheet, egal ob das Media-Query gerade zutrifft oder nicht. (Das gilt auch für @media="print".) Das führt zu unnötig vielen HTTP-Requests und unnötig viel übertragenen Daten. Die Stylesheets werden ja nicht gänzlich unterschiedlich sein, sondern viele Gemeinsamkeiten aufweisen.  
  
Und das füht gleich zu  
  
2\. Wartbarkeit: Änderungen müssen nicht nur an einer Stelle gemacht werden, sondern alle Stylesheets müssen gepflegt werden. Don’t do this! DRY!  
  
Es sollten nicht mehrere Stylesheet mit mehreren link-Elementen eingebunden werden, sondern ein Stylesheet in einem link-Element ohne @media-Attribut. In diesem Stylesheet befinden sich dann sämtliche Media-Querys in @media-At-Regeln.  
  
  
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. Web developers are not interested in the device width; it’s the width of the browser window that counts.” [[viewports](http://www.quirksmode.org/mobile/viewports.html)]  
  
Vielleicht gibt der Artikel auch die Antwort auf das Verhalten des Firefox? Rundungsfehler beim Umrechenen zwischen CSS-Pixeln und Device-Pixeln?  
  
Qapla'

-- 
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)

[Gunther]

@@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