Beste Methode für Geräteerkennung?

PseudoPsycho · 04/10/2013, 14:19

Ich bastle gerade eine alternative Seitenvariante für Smartphones und überlege, welche Methode zur Geräteerkennung die beste ist.

Natürlich hängt das auch vom Projekt ab, aber welche Methode nutzt ihr denn für gewöhnlich, bzw. würdet ihr nutzen?

Spoiler

Ich persönlich neige zu der Variante, mit JS die Bildschirmgröße auszulesen und weiterzuleiten. Kombiniert mit der Subdomain können Fehler durch den Nutzer wieder korrigiert werden.

BattleTale · 04/10/2013, 14:30

Ich nutze wenn ich es benötige auch JavaScript und lese damit die größe aus.
Sollte diese dann kleiner als *** px sein leite ich auf eine Sub-Domain oder einen anderen Ordner weiter.

Synatex · 04/10/2013, 17:22

Kann man nur indirekt sagen. Willst du die Darstellung oder den Content je nach Version ändern? Für Darstellung nutze ich die CSS Variante, für Contentänderungen (wie beispielsweise verkleinerte Bilder für mobile Versionen) die PHP Variante.

MrPuschel · 04/10/2013, 18:31

Die Frage ist ein bischen müßig. Schließlich kannst du sie auch beliebig kombinieren.

Vom auslesen der Fenstergröße mittels Javascript halte ich persönlich wenig. CSS3 bietet dir mehr Flexibilität und ist weniger fehlerbehaftet. Im mobilen Bereich unterstützen auch alle Marktrelevanten Browser CSS3 in ausreichender Form.

Wie Synatex schon geschrieben hat ist Device Management mit CSS3 für eine durchschnittliche Internetseite völlig ausreichend. Interessant (Server-seitige Frameworks einzusetzen) wird es sobald du besondere Anwendungsfälle hast. Zum Beispiel Bandbreiten-intensivem Content wie Bilder oder wenn du Dateien auslieferst (pdf, ebooks) die für verschiedene Endgeräte unterschiedlich optimiert sein können. Alles was du gern bearbeiten möchtest bevor es an das Gerät ausgeliefert wird.

BattleTale · 04/10/2013, 20:26

Wobei mir gerade einfällt das ganze kannst du auch mit einer .htaccess machen

Code:

    RewriteEngine On

    RewriteBase /

    RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]

    RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]

    RewriteRule ^$ http://m.deine-seite.de [R,L]

PseudoPsycho · 04/12/2013, 17:41

Quote:

Originally Posted by MrPuschel

Vom auslesen der Fenstergröße mittels Javascript halte ich persönlich wenig. CSS3 bietet dir mehr Flexibilität und ist weniger fehlerbehaftet.

Inwiefern ist die JS-Lösung denn fehlerbehaftet? Die einzige Möglichkeit, die mir einfällt, wäre bei deaktiviertem JS (wodurch HTML5-Apps, etc. dann aber ohnehin nicht funktionieren. Kann ich mir kaum vorstellen, dass das jemand tut).

Quote:

Wie Synatex schon geschrieben hat ist Device Management mit CSS3 für eine durchschnittliche Internetseite völlig ausreichend. Interessant (Server-seitige Frameworks einzusetzen) wird es sobald du besondere Anwendungsfälle hast. Zum Beispiel Bandbreiten-intensivem Content wie Bilder oder wenn du Dateien auslieferst (pdf, ebooks) die für verschiedene Endgeräte unterschiedlich optimiert sein können. Alles was du gern bearbeiten möchtest bevor es an das Gerät ausgeliefert wird.

Bei mir persönlich ist das der Fall. Die Frage war aber absichtlich allgemein gehalten. Was die Anwendungsfälle angeht, stimme ich dir hierbei natürlich zu.

Synatex · 04/13/2013, 01:03

Quote:

Inwiefern ist die JS-Lösung denn fehlerbehaftet? Die einzige Möglichkeit, die mir einfällt, wäre bei deaktiviertem JS (wodurch HTML5-Apps, etc. dann aber ohnehin nicht funktionieren. Kann ich mir kaum vorstellen, dass das jemand tut).

Es gibt unterschiedliche Interpretationsweisen von 'document' und 'window'. Ich kanns mir selbst nicht erklären. Beispielsweise interpretierte der Chrome damals die Höhe des Fensters anders als der Firefox, obwohl beide gleich groß eingestellt waren. Warum? Weil einer eine dumme Toolbar installiert hatte. Hat man die weggeklickt, war das Design zeschossen.

PseudoPsycho · 04/13/2013, 12:51

Quote:

Originally Posted by Synatex

Es gibt unterschiedliche Interpretationsweisen von 'document' und 'window'. Ich kanns mir selbst nicht erklären. Beispielsweise interpretierte der Chrome damals die Höhe des Fensters anders als der Firefox, obwohl beide gleich groß eingestellt waren. Warum? Weil einer eine dumme Toolbar installiert hatte. Hat man die weggeklickt, war das Design zeschossen.

Naja, es geht hierbei ja nicht um window und window.document, sondern um window.screen. Die Bildschirmgröße hat ja schließlich nichts mit der Fenstergröße zu tun.

MrPuschel · 04/13/2013, 13:50

Screen liefert dir bei IOS den gleichen Wert für portrait und landscape orientation. Android < 4 liefert bei screen.height und falschem Doctype (auch HTML5) schon mal gern 1003 als Höhe zurück. Und es geht noch weiter, Blackberrys geben auch mal Werte wie 337 oder 401 zurück. Auf einigen Geräten ist das Verhalten äquivalent zu document.

screen.height und screen.width sind damit sehr anfällig. Test case von

Es macht wenig Sinn eine umständliche und fehlerbehaftete Methode zu verwenden wenn eine Zeile die Anforderungen erfüllt:
<link rel="stylesheet" href="handheld.css"
media="only screen and (max-device width:480px)"/>
In diesem Fall liefert dir das Gerät was du wissen möchtest.

Ansonsten sei noch angemerkt das jonglieren mit pixeln kein responsive web design ist.
Artikel bei

zu responsive web design.

PseudoPsycho · 04/13/2013, 13:54

Quote:

Originally Posted by MrPuschel

screen.height und screen.width sind also sehr anfällig. [...] Ansonsten sei noch angemerkt das jonglieren mit pixeln kein esponsive web design ist.

'kay. Und was ist dann die beste Methode, wenn ich auch anderen JS-Code (und nicht nur CSS) bei Mobiltelefonen benötige?

MrPuschel · 04/13/2013, 14:38

Was möchtest du denn machen?

Thr!ce · 04/13/2013, 14:48

Für Browser, die kein Media Query unterstützen:

Adroxxx · 04/13/2013, 18:00

Was du benutzen willst, hängt stark davon ab was du machen willst.
Wenn du die Webseite responsive oder adaptive gestalten willst, dann nutzt man idR Media Queries.

Wenn du zu einem Mobile Theme weiterleiten willst würde ich einen mix aus JS und PHP nehmen.