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:
768Auf meinem Samsung Galaxy gibt dies Folgendes aus:
800An 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?
quelle
device-widthziemlich schlecht?Antworten:
Hör auf, dir so viele Sorgen um bestimmte Geräte zu machen.
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.
quelle
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.
quelle