Responsives Webdesign vs. User-Agent-Sniffing


13

Die CSS3- mediaAbfragefunktion hat zu vielen interessanten Möglichkeiten bei der Entwicklung von Websites geführt, die sich an viele verschiedene Bildschirmgrößen und Geräte anpassen lassen.

In der Praxis bekomme ich jedoch allmählich das Gefühl, dass die CSS3- mediaAbfragefunktion und die gesamte "Responsive Web Design" -Bewegung möglicherweise nicht ihren Versprechen entsprechen.

Das Problem ist, dass sich Webentwickler letztendlich hauptsächlich darum kümmern, ob ihre Benutzer Inhalte über einen Desktop, ein Tablet oder ein Mobilgerät anzeigen. CSS3 bietet jedoch nur die Möglichkeit, die Bildschirmauflösung zu erkennen . Theoretisch scheint die Erkennung der Bildschirmauflösung eine großartige Möglichkeit zu sein, die Einstellungen für verschiedene Geräte vorzunehmen. Aber in der Praxis ...

Angenommen, wir haben eine einfache Javascript-Funktion, die nur die Bildschirmbreite ausgibt:

function foo()
{
   alert(screen.width);
}

Auf meinem Blackberry Touch wird Folgendes ausgegeben:

768

Auf meinem Samsung Galaxy gibt dies Folgendes aus:

800

An diesem Punkt kommt die Auflösung von Mainstream-Smartphones der Auflösung auf Desktop-Ebene ziemlich nahe. Die Fähigkeit zu erkennen, ob ein Benutzer Ihre Website über ein Smartphone, ein Tablet oder einen Desktop anzeigt, scheint immer schwieriger zu werden, wenn Sie lediglich die Bildschirmauflösung verwenden.

Dies lässt mich die gesamte Weisheit hinter der gesamten CSS3-Bewegung "Responsive Web Design" in Frage stellen, die auf Medienanfragen basiert. Es scheint fast so, als ob die mediaAbfragefunktion besser für die Anpassung an ein Browserfenster zur Größenänderung auf einem Desktop-Bildschirm geeignet ist, als für verschiedene mobile Geräte.

Eine andere mögliche Technik zum Erkennen von Mobil- oder Tablet-Geräten ist die Verwendung der Funktionserkennung, indem überprüft wird, ob das ontouchstartEreignis unterstützt wird. Aber selbst dies wird immer unzuverlässiger, da viele Desktop-Bildschirme Berührungen unterstützen.

Frage: Wenn ich mich als Webentwickler nicht auf die Erkennung von RWD oder Features verlassen kann, ist User-Agent-Sniffing (so notorisch unzuverlässig wie immer) wirklich die beste Option, um mobile Geräte zu erkennen?


Wenn das Ziel von Responsive Web Design (wie Wikipedia behauptet ) "einfaches Lesen und Navigieren mit einem Minimum an Größenänderung, Schwenken und Scrollen" ist, warum interessiert es Sie dann, ob es sich um einen Desktop oder ein Handy handelt? Entscheidend ist die Bildschirmauflösung und Bildschirmgröße des Geräts, nicht der Gerätetyp. Nein?
Ruakh

Ich vermute, ich sage, dass der Zusammenhang zwischen "Bildschirmauflösung" und tatsächlicher Bildschirmgröße (z. B. Zentimeter / Zoll Bildschirmbreite) immer vorübergehender wird.
Channel72

Ich dachte, Sie sollten etwas mit der gerätebreiten Medienabfrage anfangen, da die Breite / Auflösung zunehmend ungenau wird, insbesondere bei der Pixeldichte verschiedener Displays, z. B. Apples "Retina" -Geräte. Wenn also die Gerätebreite innerhalb der allgemeinen Breite eines Mobilgeräts liegt, wird ein anderes Layout angezeigt. Für einen Tablet / Desktop-Benutzer zeige ich nur das gleiche Layout, dh 1024px breit.
zuallauz

@zuallauz, ist die Unterstützung für device-widthziemlich schlecht?
Channel72

Warum gehst du nicht mit em Einheiten? Auf diese Weise verschiebt sich der Inhalt basierend auf dem verfügbaren Textbereich ...

Antworten:


12

Hör auf, dir so viele Sorgen um bestimmte Geräte zu machen.

Die Fähigkeit zu erkennen, ob ein Benutzer Ihre Website über ein Smartphone, ein Tablet oder einen Desktop anzeigt, scheint immer schwieriger zu werden, wenn Sie lediglich die Bildschirmauflösung verwenden

Das Erkennen über die Bildschirmauflösung wird zunehmend schwieriger und schwieriger, je mehr Geräte auf den Markt kommen. Der Zweck von Medienabfragen besteht jedoch nicht darin, Gerätetypen zu erkennen es ist nicht mehr angenehm, bei den gegenwärtigen Dimensionen zu verwenden. Wenn die Site bei einer Breite von 550px auseinanderzufallen beginnt, spielt es keine Rolle, ob es ein Gerät mit diesen Abmessungen gibt oder nicht: Sie legen den Haltepunkt dort fest.

Genauso verhält es sich mit der Feature-Erkennung. Wenn das Gerät Touch unterstützt, was macht es dann aus, wenn es sich um ein mobiles Gerät oder einen zukünftigen wandgroßen Monitor handelt? In beiden Fällen werden die Touch-Verbesserungen wahrscheinlich nützlich sein.

User-Agent-Sniffing ist - wie Sie gesagt haben - völlig unzuverlässig. Ich könnte meine User-Agent-Zeichenfolge in Shakespeare-Anführungszeichen ändern, wenn ich es auch wirklich wollte. Was würde Ihre Site dann über meinen Browser entscheiden?

Benutzerprogramme erfordern auch viel Arbeit, um alle Möglichkeiten zu handhaben. Hast du einen für Firefox auf Android? Chrome auf iOS? Delphin auf Froyo? Der WiiU-Browser? Der extrem eingeschränkte Browser auf meinem alten LG Feature Phone? Luchs? IE 13? Links? Eiswiesel? Der Browser des Blackberry-Playbooks? Wie können Sie den Unterschied zwischen Opera auf einem Tablet und Opera auf einem Telefon erkennen?

Diese Liste kann nur im Laufe der Zeit erweitert werden.


Ein einspaltiges Layout eignet sich normalerweise gut für Smartphones. Für ein Tablet können Sie mit einem 2-Spalten- oder sogar 3-Spalten-Layout davonkommen, und für Desktops funktionieren normalerweise 3 Spalten einwandfrei. Unabhängig davon hängt die ideale Anzahl der angezeigten Spalten in der Regel von den biologischen Fähigkeiten des menschlichen Auges und nicht von der Bildschirmauflösung ab. Mein Punkt ist, dass es schön wäre, wenn es eine engere Korrelation zwischen der Bildschirmauflösung und der Wahrscheinlichkeit gibt, dass ein typischer Mensch Ihre Site einfach visuell scannen kann. Zumindest scheint CSS3 eine solche Korrelation anzunehmen.
Channel72

1
Eigentlich sollte es so sein. CSS-Pixel sollen mit Winkeln und Abständen definiert werden, nicht mit physischen Pixeln. Viele Hersteller ignorieren dies jedoch in ihren Standardeinstellungen.
Mike Gossmann

@ Channel72 Ein einspaltiges Layout eignet sich gut für jede schmale Bildschirmbreite . Es spielt kaum eine Rolle, ob die Bildschirmbreite schmal ist, da es sich um einen Smartphone-Browser oder einen Desktop-Browser in einem verkleinerten Fenster auf einem riesigen Monitor handelt. Responsive Webdesign versucht, alle Szenarien angemessen zu berücksichtigen, unabhängig vom Benutzeragenten.
Eric King

Was ist, wenn Sie eine völlig andere Ansicht für mobile Benutzer bereitstellen möchten? Was ist, wenn Sie verhindern, dass mobile Benutzer alle irrelevanten Daten herunterladen, die für Desktop-Benutzer erforderlich sind? User Agent ist der richtige Weg ...
John

1

User Agents lügen auch. Wenn Sie sich bei Google umsehen, finden Sie Listen mit Benutzeragenten im Vergleich zur Realität. Das ist also ein Problem. Einige greifen auf die dpi-Einstellung zurück, um festzustellen, um welches oder welches Gerät es sich handelt.


3
Wenn jemand falsche Daten in Benutzeragentendaten angeben musste, wird er eine Standardversion der Website erhalten ...
John
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.