Modernizr-Mobile-Device-Detection?

[soundZ]

Hallo in die Runde,

ich bin auf der Suche nach einer fixen Detection die im Modernizr-Style dem Body eine CSS-Klasse "mobile" oder ähnlich bei mobilen Geräten hinzufügt.

Nach möglk. eine Lösung die nicht JQuery & Co vorraussetzt, da die CSS-Klasse natürlich möglichst fix hinzugefügt werden soll und nicht erst nachdem JQuery geladen ist:-)

Für Anregungen bin ich wie immer Dankbar!
Grüße
Simon

[thomas_E]

Eine einfache Lösung wäre das an der Fenstergröße festzumachen (window.innerWidth * window.innerHeight)
Das erkennt zwar nicht wirklich, ob es sich um ein mobiles Gerät handelt, aber imo das wesentliche: die Fläche, die dir zum Anzeigen bereitgestellt wird.

oder was hast du sonst vor?

edith: das ganze kannst du auch mit css3 media queries machen, ganz ohne JS

[soundZ]

Hey Thomas,

die Idee ist nicht schlecht - Danke!
Ich muss leide wirklich direkt prüfen ob's ein Mobilgerät ist. Idealerweise durch Erweiterung von Modernizr.
Einfach die Auflösung abzufragen reicht leider nicht aus da - theoretisch - die Seite ja auch in entsprechend kleiner Auflösung auf einem Desktop aufgerufen werden könnte :-)

Ich hab' hier noch scheinbar gute Lösungen in allen gängigen Sprachen gefunden: Detect Mobile Browsers - Open source mobile phone detection

Nun denke ich gerade über eine PHP-Lösung nach. Vielleicht auch unter Performance-Aspekten vorzuziehen

[thomas_E]

Einfach die Auflösung abzufragen reicht leider nicht aus da - theoretisch - die Seite ja auch in entsprechend kleiner Auflösung auf einem Desktop aufgerufen werden könnte :-)

ja, und?
Dann wird in dem kleinen Browserfenster eine Version deiner Seite angezeigt, die für kleine browserfenster gedacht ist (wie bspw für Handys)

worum geht es? ums Layout? oder wofür musst du wissen, dass es "wirklich" ein Mobilgerät ist?

Nun denke ich gerade über eine PHP-Lösung nach. Vielleicht auch unter Performance-Aspekten vorzuziehen

kommt halt stark auf den Einsatzzweck, und die Implementierung an.
PHP kann hier Sinn machen, muss aber nicht.

[pixelslave]

Wie bitte soll eine Serverseitige Lösung (PHP) herausfinden was für ein Client verwendet wird??

Verwende doch eine CSS Media Queries um deine Darstellung auf die verschiedenen Geräte abzustimmen.

Grüße

[Dharokan]

Vielleicht will er ja auch das Verhalten ändern. Click vs Hover etc.
Edit: aber auch dafür wäre eine gezielte feature-detection von modernizr und co. imho besser geeignet
Falls es jedoch aus irgendwelchen Gründen eine globale Erkennung sein soll:

detectmobilebrowsers.com sieht doch gar nicht so verkehrt aus.

Die jQuery-Variante scheint mir auf den ersten Blick auch gar nicht auf jQuery angewiesen zu sein. Vielmehr setzt sie einfach das Flag jQuery.browser.mobile
Das kannst Du dann an anderer Stelle auslesen, z.B. um zu modernizr eine Klasse hinzuzufügen.

Für die reine Darstellung würde ich aber auch auf media queries zurückgreifen.

Viele Grüße

[shin10]

Zitat von pixelslave

Wie bitte soll eine Serverseitige Lösung (PHP) herausfinden was für ein Client verwendet wird??

Mittels useragent ($_SERVER['HTTP_USER_AGENT'] ), aber das ist ein reines Desaster, egal mit welcher Sprache, egal ob server oder clientseitig. WebAIM: Blog - History of the browser user-agent string
Nimm media queries. Alles andere scheint mir zur Zeit unsinnig.

mfg

sx

[pixelslave]

Zitat von shin10

Mittels useragent ($_SERVER['HTTP_USER_AGENT'] ), aber das ist ein reines Desaster, egal mit welcher Sprache, egal ob server oder clientseitig. WebAIM: Blog - History of the browser user-agent string
Nimm media queries. Alles andere scheint mir zur Zeit unsinnig.

mfg

sx

Haha, der Text ist cool

@soundZ: was hast du denn genau vor?

[andrelehnert]

Hi -
Dreamweaver generiert folgenden Code zum Switchen des css je nach Größe:

<link href="css/style_s.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)"  >
<link href="style_m.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)"  >
<link href="style_x.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

Was haltet Ihr grundsätzlich davon? Funzt das auch auf Mobile Browsern?
Die Desktop-Browser IE9, FF, Opera, Chrome schlucken es - Safari anscheinend nicht.

LG ANdré

EDIT : ÄHM ja genau - das sind dann wohl die media-queries...

[shin10]

Inwiefern funktioniert das im Safari bei dir nicht?
Also, wenn ich mir bspw. die http://2011.beyondtellerrand.com/ ansehe und zusammenschiebe sieht man sehr schön, wie er switched.

[Nightflyer]

Zitat von pixelslave

Haha, der Text ist cool

lol, indeed

[soundZ]

Himmel-Herrgott, hier ist ja wat los:-) Vielen Dank für die vielen guten Anregungen!
Und der von shin10 verlinkte Text ist nen Traum! Dank. Dennoch bin ich guter Hoffnung, dass die Abfrage des User-Agents via PHP besser funktioniert als die erst seit kurzem unterstützten Media Queries:-)

Zum Einsatzzweck (eigentlich wollte ich euch nicht mit den Details langweilen):
Einerseits dient es - wie vermutet - dem Ändern der Darstellung. Hierfür wären Media Queries ohne Zweifel eine sehr brauchbare Lösung. Andererseits sollen aber JS-Funktionen beeinflusst werden.

Da ich auf jeden Fall verhindern will, dass man durch (un)geschicktes User-Verhalten* "Chaos" mit der Seite veranstalten kann wollte ich gerne EINE Eigenschaft haben, über die ich sowohl die Styles als auch das JS steuere. Da schien mir eine CSS-Klasse ideal (nach Modernizr-Systematik).
Da man mit einer PHP-Lösung auch die richtige CSS-Klasse rausgeschrieben bekommt, wenn JS deaktiviert ist gewinnt PHP hier nochmal einen Pluspunkt :-)

Ich sitze daher nun auch gerade an einer Implementierung über die PHP-Variante von detectmobilebrowsers.com

Jetzt stehe ich nur noch vor dem neuen Problem, dass ich unter den Mobilbrowsern noch wieder zwischen Tablets und Handys unterscheiden muss... ürx. Und auch hier dürfte die Abfrage der Auflösung schon in naher Zukunft nicht mehr als brauchbares Mittel geeignet sein.
Watn Spaß! :-)

Vielleicht hat dazu ja noch jemand eine handliche Lösung?

Viele Grüße
Simon

____________________________
* Chaos durch ungeschicktes User-Verhalten
z.B.: Man lade die Seite in normaler Größe auf dem Desktop. Dann skaliert man sie auf eine Mobile-Browser-Größe herunter sodass einige Elemente in den für Mobilgeräte vorgesehenen "Status" wechseln. Das aber bereits geladene JS müsste dies nun extra wieder abfragen damit es nicht, bzw. angemessen, auf die nun neu gestylten Elemente reagieren kann.
Mir ist klar, dass das schon ein recht spezieller Fall ist, aber das soll halt ne saubere Sache werden.

[pixelslave]

hm, ich finde da hakt es noch am Konzept. Was du verhindern willst, kannst du nicht verhindern - wozu auch. Wenn der User sich mit seinem Surfverhalten, das du hier beschreibst und ich nicht wirklich erwarten würde, die Seite zerstört kannst du nix dafür.

Les dir vlt. mal den ein oder anderen Blogartikel zu Responsive-Design durch. Ist gerade DAS Buzzword in sachen CSS und HTML. Solltest also genügend Inhalte dazu finden.

Grüße

[soundZ]

Klar, Responsive Webdesign ist mir durchaus bekannt... meine aller erste Website war übrigens auch schon super-responsive... 1995 oder so Hach, das waren Zeiten.

Mein Anspruch an die Website ist aber, dass der User keinen Mist damit machen kann. Bei einem Windows-Programm-Fenster erwartet man ja auch, dass man es resizen kann wie man gerade lustig ist und dass dadurch nicht das GUI oder die Funktionalität der Software flöten geht... vielleicht sind meine Ansprüche hoch, sie müssten aber durchaus umsetzbar sein

An welcher Stelle hakt denn das Konzept konkret? Findest Du die Steuerung der Styles und des JS über eine Body-Css-Klasse unglücklich? Mir schien meine Idee nicht total bescheuert

[shin10]

Zitat von soundZ

* Chaos durch ungeschicktes User-Verhalten
z.B.: Man lade die Seite in normaler Größe auf dem Desktop. Dann skaliert man sie auf eine Mobile-Browser-Größe herunter sodass einige Elemente in den für Mobilgeräte vorgesehenen "Status" wechseln. Das aber bereits geladene JS müsste dies nun extra wieder abfragen damit es nicht, bzw. angemessen, auf die nun neu gestylten Elemente reagieren kann.
Mir ist klar, dass das schon ein recht spezieller Fall ist, aber das soll halt ne saubere Sache werden.

Weiß ja jetzt nicht was du vorhast, also mal so als Randbemerkung: Das ist ein Problem, das bei zu speziellen Sachen auf dem handheld fast schon Standard ist. Ich sag nur Wechsel der Orientierung. Da bastel ich auch gerade an einer Spielerei und es dauert momentan fast 2 Sekunden, bis alles wieder an Ort und Stelle sitzt. Schlimm genug, aber da ist die Vorauswahl mit PHP eine ganz schlechte Idee. (Also auf mein Projekt bezogen - du musst das schon selbst wissen)