Chrome (Android) - Media Queries "unbenutzbar"!?

[Gunther]

Hallo werte Selfgemeinde!

Ich erstelle gerade für ein Projekt ein RWD.
Dabei möchte ich gerne Media Queries für verschiedene Viewportgrößen verwenden.

Soweit so gut ..., ansich kein Problem, wenn da nicht Chrome (für Android) wäre.
Scheinbar ist es nur mit CSS nicht mehr möglich, auf die tatsächliche Viewportgröße, oder Width zu schließen, zumindest nicht, wenn das Gerät eine höhere device-pixel-ratio als 1 hat.

Nach einer ausführlichen Googlesuche, bin ich vorläufig zu dem "Ergebnis" gekommen, dass es wohl damit zu tun hat:
"Support for target-densitydpi in the viewport meta tag was recently removed from WebKit and with Chrome for Android moving forward to current revisions on WebKit, this change is now rolling out in Android."
Quelle: Viewport target-densitydpi support is being deprecated

Siehe auch: http://trac.webkit.org/changeset/119527

Das Problem aktuell ist, dass sämtliche CSS Media Queries "nicht mehr funktionieren", da bspw. selbst eine Media Query mit "min|max-device-width" FALSCH interpretiert wird.

Auf meinem Samsung Galaxy S (I9000) mit einer physikalischen Auflösung von 480 x 800 Pixeln  (Portrait) "behauptet" Chrome nun, dass der Screen lediglich 320px breit wäre. Und auch sämtliche Media Queries verhalten sich so!!!

Ich habe selber nur die aktuellste Version 26.0.1410.58 zum Testen zur Verfügung.

Der ebenfalls auf Webkit basierende Android Browser selber, macht nach wie vor alles "richtig".

Was mich jetzt u.a. interessieren würde ist:

• Kann dieses Problem jemand von euch bestätigen/ nachvollziehen?
• Falls ja, weiß jemand, wie man es vermeiden/ umgehen kann?

Ach wie langweilig wäre es doch, wenn den Browserfritzen nicht ständig etwas "Neues" einfallen würde ...!

Gruß Gunther

[Gunther]

Ich nochmal ...!

Hier noch 2 Links, die ich eben vergessen habe, um die Sache online zu testen:

1. http://responsejs.com/labs/dimensions/
2. http://cssmediaqueries.com/overview.html

Gruß Gunther

[Gunther]

Hallo werte Selfgemeinde!

Auch auf die Gefahr hin, dass das hier zu einem "Selbstgespräch" wird ...!
Wie es scheint verwendet Chrome (seit der Version 25?) DIPs anstatt CSS Pixel.

Wenn dem tatsächlich so ist, wäre das natürlich ein fataler Fehler ...!

Mich erstaunt es ein wenig, dass es bisher keine Resonanz gab!?
Jeder, der sich mit dem Thema RWD aktuell auseinandersetzt, müsste sich ja früher oder später mit diesem Problem konfrontiert sehen!?

Gruß Gunther

[Gunther]

Hallo werte Selfgemeinde!

Nachdem diese zumindest für mich gravierende Problematik an verschiedenen Stellen gepostet habe und es bisher nirgendwo auch nur eine Bestätigung gab, habe ich mich entschlossen, es direkt als Bug zu melden - siehe: http://code.google.com/p/chromium/issues/detail?id=235845

Nachdem der Status nun bereits auf 'Available' geändert wurde, gehe ich also davon aus, dass es sich tatsächlich um einen solchen habdelt.

Gruß Gunther

[Gunther]

Hallo werte Selfgemeinde!

Also ..., es ist tatsächlich volle Absicht von Apple, respektive Webkit, sog. DIPs (Device Independent Pixel) zu verwenden. Und nachdem man nun auch in Chrome die Unterstützung der Option 'target-densitydpi=device-dpi' im Meta-Tag gestrichen hat, führt das dazu, dass man als Autor nicht mehr in der Lage ist, eine Seite für ein mobiles Endgerät in der eigentlichen Auflösung des jeweiligen Geräts anzeigen zu lassen, sondern nur noch in der Größe, die der Hersteller oder der Browser "für passend" erachten.

Das wird natürlich nur dann "zum Problem", wenn das Gerät eine höhere Device Pixel Ratio als 1.0 hat, was aber inzwischen auf die allermeisten Smartphones zutrifft.

Was mich besonders daran stört ist, dass es keine Möglichkeit mehr gibt, diese "automatische" Vorgabe als Autor zu übersteuern. Denn sowohl der Mobile Safari (iOS), als auch Chrome (Android) sind "übers Ziel hinausgeschossen", da sie selbst mit Javascript als screen.height/width nur noch die "virtuelle" (oder besser "willkürliche) Vieportgröße ausspucken.

Müßig zu erwähnen, dass sich alle absoluten Größen in CSS natürlich auf diese "virtuelle" Viewportgröße beziehen.

Das halte ich insofern für äußerst problematisch, um nicht zu sagen für falsch, als dass sich bspw. Media Queries mit 'device-width|height' eben auch nicht mehr auf die Auflösung (screen size) des Geräts beziehen, sondern ebenfalls nur noch auf die virtuelle Größe.

Zu verdanken haben wir das Apple und ihrem Versuch, die diversen Geräte mit ihren unterschiedlichen Pixeldichten alle in eine überschaubare Menge mit möglichst wenigen und nach Möglichkeit ganzzahligen Faktoren für die Pixeldichte (Device Pixel Ratio) zu packen.

Allerdings bin ich der Meinung, dass solche "Bevormundungen/ Automatissmen" nur solange akzeptabel sind, wie es auch eine Möglichkeit gibt, diese zu übersteuern. Und genau das ist aktuell nicht mehr gegeben!

Damit wird der Entwurf der neuen at Regel 'viewport' auch von vornherein konterkariert, da sich eben device-width|height nicht auf die tatsächliche Auflösung des Geräts beziehen, sondern auf die "device independent" Viewportgröße!

Ebenfalls äußerst "lästig" ist das aktuell natürlich unterschiedliche Verhalten der diversen Browser. Hier mal eine kleine Auflistung der jeweils aktuellsten Versionen für Android auf einem Samsung Galaxy S (GT-I9000) mit einer Auflösung von 480 x 800:

Chrome:
document.documentElement.clientWidth x document.documentElement.clientHeight: 320 x 412
window.innerWidth x window.innerHeight: 320 x 412
window.outerWidth x window.outerHeight: 320 x 412
screen.width x screen.height: 320 x 486
window.devicePixelRatio: 1.5

Android (4.2.2):
document.documentElement.clientWidth x document.documentElement.clientHeight: 320 x 408
window.innerWidth x window.innerHeight: 320 x 408
window.outerWidth x window.outerHeight: 480 x 690
screen.width x screen.height: 480 x 800
window.devicePixelRatio: 1.5

Dolphin HD:
document.documentElement.clientWidth x document.documentElement.clientHeight: 320 x 240
window.innerWidth x window.innerHeight: 320 x 240
window.outerWidth x window.outerHeight: 320 x 240
screen.width x screen.height: 480 x 800
window.devicePixelRatio: 1.5

Firefox:
document.documentElement.clientWidth x document.documentElement.clientHeight: 320 x 412
window.innerWidth x window.innerHeight: 320 x 412
window.outerWidth x window.outerHeight: 480 x 618
screen.width x screen.height: 480 x 728
window.devicePixelRatio: 1

Opera Mobile:
document.documentElement.clientWidth x document.documentElement.clientHeight: 480 x 534
window.innerWidth x window.innerHeight: 480 x 534
window.outerWidth x window.outerHeight: 480 x 534
screen.width x screen.height: 480 x 690
window.devicePixelRatio: 1

Der native Android Browser und Dolphin basieren, genau wie Chrome, auf der Webkit Engine - unterstützen aktuell aber noch die propietäre Option 'target-densitydpi=device-dpi' im Meta-Tag.

Firefox macht es ohne JS total verkehrt, was bedeutet, dass man nur mit CSS alleine keine Chance hat, bspw. eine passende Grafik auszuliefern.

Ich finde, dass alleine schon der Begriff "device independent" aussagt, dass sich solche Größen mit CSS "schlecht vertragen".
Und wer braucht die eigentlich, diese "device independent" Größen? In meinen Augen sind die völlig überflüssig und vergrößern lediglich das bereits vorhandene "Chaos" im Bereich der Displays mit hoher Pixeldichte!

Gruß Gunther

[Gunther]

Hallo werte Selfgemeinde!

Nicht mehr ganz taufrisch, aber dennoch vielleicht für den einen oder anderen neu:
Es tut sich etwas am Browsermarkt. Anfang April wurde bekannt, dass Google seine Kooperation/ Mitarbeit an Apples Webkit Browser einstellt und künftig einen eigenen Fork unter dem Namen Blink vorantreiben will - http://www.appletruthandrumors.com/de/google-parts-ways-with-apple-over-webkit-launches-blink/

Desweiteren hat Opera verkündet, seine eigene Presto Engine nicht mehr weiterzuentwickeln, und stattdessen die Webkit Engine für seine Browser zu verwenden.

Jetzt fragt man sich natürlich im Zusammenhang mit vorhergehenden Meldung, an welcher "Variante" sich Opera denn nun beteiligt?

Wenn man den Gerüchten und einer Meldung von Bruce Lawson glauben darf, dann tut sich Opera mit Google zusammen, sprich man beteiligt sich an der Entwicklung von Blink - http://www.brucelawson.co.uk/2013/hello-blink/

Das finde ich auch wenig verwunderlich, denn letztlich dürfte es eine Entscheidung zwischen Android und iOS sein.

Ich befürchte, dass diese Entwicklung uns mit an Sicherheit grenzender Wahrscheinlichkeit wieder neue "Eigenheit" seitens Apple in Webkit bescheren wird, wenn sozusagen das ausgleichende Gegengewicht in Form von Google wegfällt. Und vermutlich wird die Klufft zwischen Android und iOS im Laufe der Zeit immer größer werden.

Schade, aber ansonsten würde es ja auch irgendwann langweilig ...! ;-)

Gruß Gunther