Gunther: media queries und Zoom

Hallo werte Selfgemeinde!

Ich habe folgende Frage im Bezug auf media queries:
Wenn ich bspw. folgende query verwende

  
@media all and (min-width: 960px) {  
    #obj {display: none;}  
}  

und mein Viewport mind. 960px breit ist, dann wenden (getestet mit) FF 3.5.1, Opera 10 beta2 und Safari 4.0.2 (alle Win) die Regel auch brav an.

Soweit wie erwartet.
Aber wenn ich die Seite im jeweiligen Browser nun "zoome" (ganze Seite - nicht nur Text), dann passiert (zu meinem Erstaunen) folgendes sobald die Seite breiter als der Viewport wird, und zwar wird die Regel dann sowohl vom FF, als auch vom Opera "ignoriert". Einzig der Safari zeigt sich davon unbeeindruckt.

Habe ich jetzt etwas falsch verstanden, oder handelt es sich dabei jeweils um einen Bug/ Fehler seitens der Browser?

Gruß Gunther

  1. Hi,

    Aber wenn ich die Seite im jeweiligen Browser nun "zoome" (ganze Seite - nicht nur Text), dann passiert (zu meinem Erstaunen) folgendes sobald die Seite breiter als der Viewport wird, und zwar wird die Regel dann sowohl vom FF, als auch vom Opera "ignoriert". Einzig der Safari zeigt sich davon unbeeindruckt.

    Habe ich jetzt etwas falsch verstanden, oder handelt es sich dabei jeweils um einen Bug/ Fehler seitens der Browser?

    "Zoomen" funktioniert in diesen Browsern offenbar so, dass zunächst alles wie normal gerendert wird, und dann das Ergebnis um Faktor x grösser *dargestellt* wird.
    Auch wenn du per JavaScript Maße von Elementen ausliest, bekommst du jedes Mal die gleiche Anzahl Pixel, egal wie gross der Zoom aktuell ist.
    Es werden also keine neuen Maße in Pixel errechnet.
    Das heisst, dein meinetwegen 800 Pixel breiter Inhalt ist nach Ansicht dieser Browser auch dann noch 800 Pixel breit, wenn du 150% Zoom einstellst - es sind dann nur "grössere Pixel".

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Hi,

      "Zoomen" funktioniert in diesen Browsern offenbar so, dass zunächst alles wie normal gerendert wird, und dann das Ergebnis um Faktor x grösser *dargestellt* wird.
      Auch wenn du per JavaScript Maße von Elementen ausliest, bekommst du jedes Mal die gleiche Anzahl Pixel, egal wie gross der Zoom aktuell ist.
      Es werden also keine neuen Maße in Pixel errechnet.
      Das heisst, dein meinetwegen 800 Pixel breiter Inhalt ist nach Ansicht dieser Browser auch dann noch 800 Pixel breit, wenn du 150% Zoom einstellst - es sind dann nur "grössere Pixel".

      Ja, so habe ich den "Zoom" vom System her auch verstanden. Deshalb bin ich ja so irritiert, dass beim Zoomen auf einmal eine vorher als größer erkannte Mindest-Breite auf einmal nicht mehr als solche erkannt/ interpretiert wird!

      Denn solange es dafür keine Vermeidungsmöglichkeit gibt, kann man die Media Queries ja schlicht nicht verwenden, da das gewünschte Layout beim Zoomen ja dann quasi "auseinanderfällt". :-(

      Gruß Gunther

      1. Hi,

        "Zoomen" funktioniert in diesen Browsern offenbar so, dass zunächst alles wie normal gerendert wird, und dann das Ergebnis um Faktor x grösser *dargestellt* wird.
        Auch wenn du per JavaScript Maße von Elementen ausliest, bekommst du jedes Mal die gleiche Anzahl Pixel, egal wie gross der Zoom aktuell ist.
        Es werden also keine neuen Maße in Pixel errechnet.
        Das heisst, dein meinetwegen 800 Pixel breiter Inhalt ist nach Ansicht dieser Browser auch dann noch 800 Pixel breit, wenn du 150% Zoom einstellst - es sind dann nur "grössere Pixel".

        gerade mal mit Firebug und den berechneten Styles überprüft. Und siehe da, mein html Element wird mit jeder Zoom-Stufe kleiner!?

        Gruß Gunther

    2. Hi,

      "Zoomen" funktioniert in diesen Browsern offenbar so, dass zunächst alles wie normal gerendert wird, und dann das Ergebnis um Faktor x grösser *dargestellt* wird.
      Auch wenn du per JavaScript Maße von Elementen ausliest, bekommst du jedes Mal die gleiche Anzahl Pixel, egal wie gross der Zoom aktuell ist.
      Es werden also keine neuen Maße in Pixel errechnet.
      Das heisst, dein meinetwegen 800 Pixel breiter Inhalt ist nach Ansicht dieser Browser auch dann noch 800 Pixel breit, wenn du 150% Zoom einstellst - es sind dann nur "grössere Pixel".

      gibt es (dennoch) eine Möglichkeit per Javascript zu ermitteln, ob der User die Seite gezoomt hat oder nicht?

      Und kann man eigentlich auch Usereinstellungen im Browser, also bspw. Option "nur Text zoomen" de-/ aktiviert, ermitteln/ abfragen?

      Sorry - hab' mich schon längere Zeit nicht mehr mit JS und seinen Möglichkeiten beschäftigt. ;-)

      Gruß Gunther

    3. Hi!

      "Zoomen" funktioniert in diesen Browsern offenbar so, dass zunächst alles wie normal gerendert wird, und dann das Ergebnis um Faktor x grösser *dargestellt* wird.
      Auch wenn du per JavaScript Maße von Elementen ausliest, bekommst du jedes Mal die gleiche Anzahl Pixel, egal wie gross der Zoom aktuell ist.
      Es werden also keine neuen Maße in Pixel errechnet.
      Das heisst, dein meinetwegen 800 Pixel breiter Inhalt ist nach Ansicht dieser Browser auch dann noch 800 Pixel breit, wenn du 150% Zoom einstellst - es sind dann nur "grössere Pixel".

      Also Firefox und Opera machen es definitiv anders. In beiden Browsern wird der Viewport (worauf sich width und height beziehen) entsprechend dem jeweiligen Zoomfaktor neu berechnet!

      Das halte ich persönlich für äußerst unglücklich gelöst, da der Einsatz von Media Queries so quasi unmöglich ist. Denn für das Layout ist ja entscheidend (oder interessant zu wissen), wie groß der Viewport bei 100% ist, und nicht wie groß bei irgendeiner Zoomstufe. Zumal es keine wirklich zuverlässige Methode zur Bestimmung/ Abfrage des Zoomlevels gibt.

      Hinzukommt, dass es die neuesten Versionen der Browser schon wieder unterschiedlich handhaben (siehe FF, Opera vs. Safari).

      Schade - so wird eine der interessantesten (hilfreichsten) Neuerungen von CSS3 in der Praxis mehr oder weniger unbrauchbar.

      Überhaupt verstehe ich nicht, warum man auf Größen, die dem Browser allesamt bekannt sind (sein müssen für das Rendering) nicht per Konstante/ vordef. Variable zugreifen kann und diese in seinem CSS entsprechend verwenden kann? Aber wenn ich mir die Entwicklung seitens des W3Cs und die Umsetzung in den Browsern so angucke, dann werde ich in meinem Leben vermutlich eh nur noch Version 4 von CSS erleben!

      Gruß Gunther

  2. Hallo werte Selfgemeinde!

    Nachdem sich ja bis jetzt (leider) noch keiner der CSS-Profis hier im Forum dazu geäußert hat, nutze ich die Gelegenheit dann mal, um meinen Eindruck nach bisheriger Recherche im Netz wiederzugeben.

    Eine der Haupthürden beim Erstellen einer Webseite war ja bisher immer die unterschiedliche Unterstützung der jeweiligen CSS (2.x) Features und deren teilweise Bugs in einzelnen Browsern.

    Und kaum dass ich dachte endlich Licht am Ende des Tunnels zu sehen, nachdem endlich auch MS mit dem IE8 eingesehen hat, dass auf Dauer wohl kein Weg an den Standards vorbeiführt, da wiederholt sich die ganze Problematik, bzw. beginnt auf's Neue!

    Nämlich mit den CSS3 Features, bei deren Implementierung in die aktuellen Browserversionen scheinbar haufenweise Bugs entstehen, oder gar die Spec. wieder unterschiedlich interpretiert wird!

    Geht der "Driss" jetzt wieder von vorne los, oder können wir CSS3 Features erst in X Jahren verwenden?

    Also nach über einem Jahrzehnt an Erfahrungen, sollte man doch langsam aber sicher mal annehmen können, dass die Beteiligten daraus auch etwas gelernt hätten. So langsam vergeht einem ja echt die Lust und die Freude ...!

    Gruß Gunther

    1. Hallo.

      Also nach über einem Jahrzehnt an Erfahrungen, sollte man doch langsam aber sicher mal annehmen können, dass die Beteiligten daraus auch etwas gelernt hätten.

      Das haben sie doch, nur eben jeder etwas anderes.
      MfG, at