Zuverlässig mobile Endgeräte mit Media Queries erkennen

Hallo zusammen,

ich erforsche derzeit die Möglichkeiten, die sich mit Media Queries ergeben.

Ich bin bereits auf ein Problem gestoßen: Wenn ich einfach nach der Auflösung abfrage und somit mobilen Endgeräten ein anderes Stylesheet präsentieren will, laufe ich seit einiger Zeit in das “Retina”-Problem - oder, um es allgemeiner auszudrücken, Handys mit Full-HD-Display.

Da nun Handys plötzlich eine höhere Auflösung als Notebooks aufweisen, fehlt mir eine Möglichkeit, Handys erfolgreich aussortieren zu können.

Ich habe von “display-ratio” gelesen, vielleicht kann mir jemand erklären, in wiefern diese Eigenschaft relevant ist und eingesetzt wird.

Warum können diese gottverdammten Hersteller nicht einfach auf media=handheld reagieren?!

Wenn mir jemand simpel erklären könnte, mit welcher Kombination von Eigenschaften ich wohl am besten mobile Endgeräte (darunter verstehe ich <= 5") aussortieren kann, wäre ich sehr dankbar.

Ich freue mich auf eure Ideen und Erklärungen
Gruß
Emil

Der Medientyp ‘handheld’ bezieht sich ja auf Geräte mit geringer Auflösung und ohne Farbe,
schlechte Anbindung ans Netz - wenn das alles zutrifft, werden sich die Geräte da vermutlich
schon nach richten.
Hat man hingegen ein Telephon mit hochauflösendem Farbmonitor, ist der davon nicht betroffen.

Hinsichtlich deines eigentlichen Problems stellt sich natürlich die Frage, warum du wissen willst,
mit was für einem Gerät die Leute auf deine Seite zugreifen.
Das Konzept der Medienanfragen (media queries) besteht ja eher darin, daß das Gerät aufgrund
seiner Fähigkeiten und Eigenschaften einen passenden Stil auswählen kann, da ist es ziemlich
belanglos, was das für ein Gerät ist, welches die Fähigkeiten hat oder auch nicht.

Somit kannst du da schon Anfragen formulieren, die es ermöglichen, einen hochauflösenden
Gerät, welches zudem viele Pixel hat (neues Telephon mit relativ kleinem Monitor), eine andere
Stilvorlage zuzuweisen als einem, welches eine niedrige Auflösung und viele Pixel hat (alter
Monitor oder altes notebook). Ein altes Telephon hat vermutlich eine niedrige Auflösung und
wenige Pixel oder wenig Farben.

Mein neuestes notebook hat etwa eine Auflösung von etwa 120 dpi, das älteste nur 72 dpi,
da kann man doch gut mit ‘resolution’ unterscheiden - man kann das ja auch kombinieren
mit ‘width’ und ‘height’, um zu separieren, wie groß der verwendbare Anzeigebereich ist -
das scheint mir jedenfalls deutlich sinnvoller als ‘device-width’ und ‘device-height’ zu sein -
weil die Leute ja oft nicht den kompletten Monitor als Anzeigebereich verwenden werden.

Wenn man etwa verfügbare Höhe und Breite in em abfragt, kann einem zumeist ja auch die
Auflösung (in dpi oder dpcm) egal sein, da man ja bereits gut abschätzen kann, wieviel Text
man da unterbringen kann.

Mittels der ‘device-*’ Merkmale und der Auflösung kannst du doch prinzipiell schon recht
selektiv auf das verwendete Gerät eingehen, scheint mit aber nicht weiter hilfreich zu sein.
Der Bezug von verfügbarer Höhe und Breite zur Auflösung kann natürlich bei Pixelgraphik
recht hilfreich sein, bei hoher Auflösung kann die recht klein werden - beziehungsweise die
Geräte können beginnen, eine Sonderregel von CSS in Anspruch zu nehmen, wo sie beginnen,
Angaben in px auf irgendwas umzuskalieren, was ungefähr einer Auflösung von 96dpi
entspricht - auch das kann bei Pixelgraphik lustig aussehen, keine Ahnung aber ab welcher
Auflösung das bei Mobiltelephonen angewendet würde, ab 192dpi oder doch schon früher ab
vielleicht etwa 145dpi? Das ist in CSS nicht genau festgelegt.
Jedenfalls kann man das aber wohl ohnehin nicht verhindern, egal mit welcher Anfrage.

Haben einige Telephone ein charakteristisches Aspektverhältnis? Hat da irgendein Hersteller
ein absurdes Patent? Wenn dem so wäre, könnte man das natürlich verwenden, um Geräte
von dem Hersteller zu identifizieren, wird aber vermutlich nicht so sein, weil die alle Anzeigen
von der Stange aus China verwenden ;o)

Wozu das Gerät identifizieren. Einfach die CSS Dateien von der größe abhängig wechseln.

    @media all{ 
        /* generell gültig */
    }
    @media (max-width: 1024px) {
        /* Netbook */
    }
    @media (max-width: 700px) {
        /* mobile groß */
    }
    @media (max-width: 300px) {
        /* mobile groß */
    }

Das sollte für ein scheinbares responsive Design genügen.
Evtl. solltest du dir das CSS Framework YAML ansehen, da gibt es noch ein paar schlauere Lösungen, wie das mit nur 1 CSS Datei geht.

Zu Display Ratio, dass du angesprochen hast: wiki.selfhtml.org/wiki/CSS/Media … pect-ratio

hallo planet-hosting,

wie im eingangspost schon erwähnt, finde ich eine simple abfrage auf anzahl der pixel ungenügend.

nehmen wir z. b. ein handy mit full-hd-auflösung. das handy würde dann ein layout anzeigen, das ich allerdings eher für geräte geplant hatte, die sagen wir >= 16 zoll sind.

in diesem zusammenhang finde ich den ansatz von hoffmann interessanter: kombination von auflösung und absoluter pixel-zahl.

ich werde das ganze weiter verfolgen und ggfls meine endlösung hier anhängen.

gruß