Beste Methode für Geräteerkennung?

04/10/2013 14:19 PseudoPsycho#1
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?


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.
04/10/2013 14:30 BattleTale#2
Ich nutze wenn ich es benötige auch JavaScript und lese damit die größe aus.
Sollte diese dann kleiner als xxx px sein leite ich auf eine Sub-Domain oder einen anderen Ordner weiter.
04/10/2013 17:22 Synatex#3
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.
04/10/2013 18:31 MrPuschel#4
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.
04/10/2013 20:26 BattleTale#5
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]
04/12/2013 17:41 PseudoPsycho#6
Quote:
Originally Posted by MrPuschel View Post
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.
04/13/2013 01:03 Synatex#7
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.
04/13/2013 12:51 PseudoPsycho#8
Quote:
Originally Posted by Synatex View Post
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. ;)
04/13/2013 13:50 MrPuschel#9
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 [Only registered and activated users can see links. Click Here To Register...]

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 [Only registered and activated users can see links. Click Here To Register...] zu responsive web design.
04/13/2013 13:54 PseudoPsycho#10
Quote:
Originally Posted by MrPuschel View Post
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?
04/13/2013 14:38 MrPuschel#11
Was möchtest du denn machen?
04/13/2013 14:48 Thr!ce#12
Für Browser, die kein Media Query unterstützen:
[Only registered and activated users can see links. Click Here To Register...]
04/13/2013 18:00 Adroxxx#13
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.