Erkennen von mobilen Browsern

mightyplow · 24. November 2014

Hallo @all,

ich versuche gerade herauszufinden, wie ich am besten prüfe, ob ein Besucher einer Seite mit einem Smartphone kommt oder nicht.

Ich habe dafür eine kleine Testanwendung gebaut, die mir am Ende sagen soll, ob mein Test funktioniert oder nicht. Ich würde euch somit bitten, diese Seite hier mal kurz zu besuchen: http://client.mightyplow.de/.

Das einzige was ich speichere, ist euer UserAgent und die Antwort die ihr da seht, ob euer Gerät ein Handy is oder nich.

Vielen Dank!

PS: Wenn ihr mit einem Handy auf die Seite kommt und da steht, das wäre kein Handy, würde ich mich sehr über eine kurze Antwort freuen, in der euer Handymodell steht. Genauso, wenn ihr mit einem anderen Gerät unterwegs seid und da stehen sollte, das es ein Handy ist (devmodes exklusive)

Visceroid · 24. November 2014

Arbeitsplatzrechner mit FF und Mobiler Chrome auf Cyanogenmod Nightly 11 - keine Probleme auf beiden Geräten.

PS: Seite habe ich auch durch Virustotal lassen ^^ man weiß ja nie was die Leute so vorhaben

MusicJunkie666 · 24. November 2014

Firefox Beta auf einem OnePlusOne mit Android 4.4.4: This does not seem to be a mobile.

Chrome Beta erkennt er aber als mobile.

mightyplow · 25. November 2014

Danke für das bisherige Feedback (und den Virentest

)

mightyplow · 26. November 2014

Danke nochmal an alle Tester! Die Methode hat sich als recht zuverlässig herausgestellt. Falls ihr auch mal per Javascript rausfinden müsst, ob der Nutzer mit nem Handy kommt, hier der Code:

Code:

function isSmartphone () {
        try {
            return (navigator.userAgent.search(/mobile/i) >= 0
                           && (window.matchMedia 
                                     && window.matchMedia('(max-width: 640px)').matches
                                       || window.screen.width < 766));
        } catch (e) {
            return false;
        }
}

Damit das zuverlässig funktioniert, muss im HTML im head (am besten ganz oben) der Metatag hin, um den Viewport auf die Geräte-Breite zu setzen:

Code:

...
<head>
    <meta name="viewport" content="width=device-width">
    ...

Daaron · 27. November 2014

mightyplow schrieb:
ich versuche gerade herauszufinden, wie ich am besten prüfe, ob ein Besucher einer Seite mit einem Smartphone kommt oder nicht.

Aus praktischen Gründen kannst du dir die Suche nach ner guten Lösung eigentlich sparen. Du weißt nie, was am Ende wirklich für ein Gerät dahinter steckt.

Denk nur an kompakte Tablets mit HDMI-Out und USB-Hub-Funktion, z.B. das neue Medion/ALDI-Tablet. Auch wenn dir der User Agent da erklärt, es wäre eine Mobile/Touch - Device, hängt es am Ende evtl. doch in einem Dock an ner großen Tastatur, ner Maus und nem 27" Monitor...
Genauso würde dir ein Kleinstcomputer wie ne Raspberry PI immer erzählen, er wäre ein Desktop, obwohl ein findiger Bastler aus nem 7" Touchdisplay und nem Akku-Pack n kleines Tablet zusammengestoppelt hat.
Und was ist, wenn du an Linking-Funktionen denkst, bei denen der Smartphone-Bildschirm auf eine andere Device übertragen wird, z.B. n Fernseher oder TFT?

Am Ende lohnt es sich nur, stur auf die Device zu hören und strikt auf die Media Queries zu achten. Die Media Queries haben immer recht!

P.S.:
Es müsste, zur besseren Funktion, eigentlich <meta name="viewport" content="width=device-width,initial-scale=1.0"> heißen

mightyplow · 28. November 2014

Hi Daaron,

danke für die Hinweise. Mir ist schon klar, dass man nich genau erkennen kann, welches Gerät genau die Seite aufruft, aber das ist in meinem Fall tatsächlich ziemlich Wurst. Es ging darum, eine App zu machen für Geräte mit Smartphonegröße. Ich gehe einfach mal davon aus, dass wenn der Nutzer einen größeren Monitor dran hängt, dass dann meine Abfrage sagt, dass da mehr als ne bestimmte Pixelbreite zur Verfügung steht und dann kann ja wieder die Desktopanwendung kommen. Defacto hat mein Test mir gesagt, dass die Handy App auf den meisten verwendeten Geräten mir genau das sagt, was ich wissen will.

Natürlich kann man wieder mit dem Argument kommen, dass ne responsive App viel besser is, als speziell eine für Smartphones aber wenn mein Chef sagt, mach ne App für Smartphones, dann kriegt er ne App für Smartphones.

Der initial-scale scheint übrigens an der Stelle bisher noch keine Bedeutung gehabt zu haben, weil die width Einstellung bereits gereicht hat, um den Pixelverhältniswert vernünftig einzurechnen. Sollte sich herausstellen, dass der initial-scale Wert wirklich mal benötigt wird, bau ich den noch mit rein.

Insofern danke für die konstruktive Anmerkung!

Atomfurz · 2. Dezember 2014

den browser webcat von meinem jolla erkennt er nicht.

Suche

Erkennen von mobilen Browsern

mightyplow

Ensign Pro

Visceroid

Rear Admiral

MusicJunkie666

Commander

mightyplow

Ensign Pro

mightyplow

Ensign Pro

Daaron

Fleet Admiral

mightyplow

Ensign Pro

Atomfurz

Ensign

Ähnliche Themen

Passend zum Thema

F1: The Movie Apple Maps zeigt Formel-1-Strecke zum Rennen in Monaco

PocketBook Verse Lite ist der 115-Euro-E-Book-Reader für Einsteiger

BOOX E-Book-Reader Go 7 und Go Color 7 (Gen II) zum Lesen und Schreiben